<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>WordPress | きいちログ</title>
	<atom:link href="https://wptech.kiichiro.work/tag/wordpress/feed/" rel="self" type="application/rss+xml" />
	<link>https://wptech.kiichiro.work</link>
	<description>WordPressとかAWSとかPHPとか</description>
	<lastBuildDate>Thu, 14 Nov 2024 13:15:30 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>【WordPress】ホストネットワーキングモードでWP-Cronをちゃんと動かす</title>
		<link>https://wptech.kiichiro.work/793kyf6xrh/</link>
		
		<dc:creator><![CDATA[むらおか]]></dc:creator>
		<pubDate>Wed, 18 Sep 2024 15:46:05 +0000</pubDate>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[Docker]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://wptech.kiichiro.work/?p=3256</guid>

					<description><![CDATA[先日、Docker Desktop でもホストネットワーキングモードがサポートされたようです。 Docker Desktop内のコンテナに対して「localhost」でアクセス可能に、WSL2のストレージ領域を自動で縮小 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>先日、Docker Desktop でもホストネットワーキングモードがサポートされたようです。</p>




<a rel="noopener" href="https://www.publickey1.jp/blog/24/docker_desktoplocalhostwsl2docker_desktop_434.html" title="Docker Desktop内のコンテナに対して「localhost」でアクセス可能に、WSL2のストレージ領域を自動で縮小など新機能、Docker Desktop 4.34正式リリース" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img decoding="async" src="https://www.publickey1.jp/2024/docker434ga01.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Docker Desktop内のコンテナに対して「localhost」でアクセス可能に、WSL2のストレージ領域を自動で縮小など新機能、Docker Desktop 4.34正式リリース</div><div class="blogcard-snippet external-blogcard-snippet">Docker社は、WindowsやMac、Linuxに手軽にDockerコンテナ環境を導入し利用できるソフトウェアであるDocker Desktopの最新版「Docker Desktop 4.34」正式版のリリースを発表しました。 Dock...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img decoding="async" src="https://www.google.com/s2/favicons?domain=https://www.publickey1.jp/blog/24/docker_desktoplocalhostwsl2docker_desktop_434.html" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">www.publickey1.jp</div></div></div></div></a>



<p>どのようなときにホストネットワーキングモードの恩恵を受けられるか考えていたのですが、ローカル環境かつ Nginx + PHP-FPM 構成で WP-Cron を使った時に良さそうだなと思ったのでやってみました。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">WP-Cron が機能しない問題</a></li><li><a href="#toc2" tabindex="0">やってみた</a></li><li><a href="#toc3" tabindex="0">まとめと感想</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">WP-Cron が機能しない問題</span></h2>



<p>ローカル環境で Nginx + PHP-FPM 構成で WordPress を動かそうとすると、WP-Cron が機能しなくなるというのは、誰もが一度は通った道かと思います。</p>



<p>WP-Cron が機能しなくなる理由を簡単に説明すると、以下のような流れになります。</p>



<ol class="wp-block-list">
<li><strong>WP-Cron は WordPress へのリクエストによってトリガーされる</strong><br>WP-Cron はページへのアクセスがあった際にスケジュールを確認し、必要があれば <code>site_url</code> 配下のエンドポイントへ HTTP リクエストを送信します。</li>



<li><strong>site_url がローカル環境では localhost になる</strong><br>ローカル環境で WordPress を実行しているため、<code>site_url</code> は <code>http://localhost</code> になることが多いです。そのため、WP-Cron は <code>localhost</code> に対してリクエストを送信することになります。</li>



<li><strong>PHP-FPM コンテナで localhost にリクエストをすると、自分自身に送信される</strong><br>Docker コンテナで <code>localhost</code> はコンテナ自身を示します。</li>



<li><strong>PHP-FPM コンテナには HTTP サーバーは開かれていない</strong><br>PHP-FPM コンテナは HTTP リクエストを受け付けるポート (通常は 80 番) が開かれていません。よって、リクエストが失敗し、WP-Cron が実行できなくなります。</li>
</ol>



<p>要するに、<code>localhost</code> が示す先がコンテナ自身になってしまうということが原因ですので、WordPress を実行するサーバーの IP アドレスにドメインが関連付けられている場合 (本番環境など) では発生し得ません。</p>



<p>WP-Cron が機能していないことは管理画面の通知から窺い知ることが出来ます。<a href="https://ja.wordpress.org/plugins/wp-crontrol/">WP Crontrol</a> をインストールした環境であれば設定画面で確認出来ます。</p>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="195" src="https://wptech.kiichiro.work/wp-content/uploads/2024/09/3369aed6f02f6b45398f6124399a98a1-1024x195.png" alt="WP Crontrol の通知で、WP-Cron が機能しないことを示す「cURL error 7: Failed to connect to localhost port 80 after 0 ms: Couldn't connect to server。」が表示されている" class="wp-image-3309" srcset="https://wptech.kiichiro.work/wp-content/uploads/2024/09/3369aed6f02f6b45398f6124399a98a1-1024x195.png 1024w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/3369aed6f02f6b45398f6124399a98a1-300x57.png 300w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/3369aed6f02f6b45398f6124399a98a1-768x146.png 768w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/3369aed6f02f6b45398f6124399a98a1-1536x292.png 1536w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/3369aed6f02f6b45398f6124399a98a1-2048x389.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>cURL error 7: Failed to connect to localhost port 80 after 0 ms: Couldn&#39;t connect to server。</code></pre></div>



<p>この事象の回避方法としては、HTTP リクエストを投げる先を <code>cron_request</code> フィルターフックで指定しているので、<code>host.docker.internal</code> などに書き換えるなどがあります。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="cron.php" data-lang="PHP" data-line="4"><code>$cron_request = apply_filters(
	&#39;cron_request&#39;,
	array(
		&#39;url&#39;  =&gt; add_query_arg( &#39;doing_wp_cron&#39;, $doing_wp_cron, site_url( &#39;wp-cron.php&#39; ) ),
		&#39;key&#39;  =&gt; $doing_wp_cron,
		&#39;args&#39; =&gt; array(
			&#39;timeout&#39;   =&gt; 0.01,
			&#39;blocking&#39;  =&gt; false,
			/** This filter is documented in wp-includes/class-wp-http-streams.php */
			&#39;sslverify&#39; =&gt; apply_filters( &#39;https_local_ssl_verify&#39;, false ),
		),
	),
	$doing_wp_cron
);</code></pre></div>



<p>ただ、ローカル環境のみで発生する事象に対して手を加えるのは、若干の気持ち悪さが残ります。</p>



<p>Docker のホストネットワーキングモードを使用すれば、<code>localhost</code> はホストを指すことになるので、上記の問題が解消しそうです。</p>



<h2 class="wp-block-heading"><span id="toc2">やってみた</span></h2>



<p>まずは、ホストネットワーキングモードを Docker Desktop 側で有効化します。手順は以下を参考にしました。</p>




<a rel="noopener" href="https://docs.docker.com/engine/network/drivers/host/#docker-desktop" title="Host network driver" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://docs.docker.com/images/thumbnail.webp" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Host network driver</div><div class="blogcard-snippet external-blogcard-snippet">All about exposing containers on the Docker host&#039;s network</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://docs.docker.com/engine/network/drivers/host/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">docs.docker.com</div></div></div></div></a>



<p>次に、Docker で Nginx + PHP-FPM + WordPress の環境を作ってみます。compose.yaml は以下です。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="compose.yaml" data-line="11,21,27"><code>services:
   db:
     image: mysql:8.0
     volumes:
       - db_data:/var/lib/mysql
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress
     network_mode: &quot;host&quot;

   nginx:
    image: nginx:1.27.1-bookworm
    volumes:
      - ./default.conf:/etc/nginx/conf.d/default.conf
    volumes_from:
      - wordpress-fpm
    depends_on:
      - wordpress-fpm
    network_mode: &quot;host&quot;

   wordpress-fpm:
     image: wordpress:6.6.2-php8.1-fpm
     depends_on:
       - db
     network_mode: &quot;host&quot;

volumes:
    db_data:
</code></pre></div>



<p>ここで <code>network_mode: "host"</code> を指定することでホストネットワーキングモードが利用できます。</p>



<p>Nginx の default.conf は以下を用意しました。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="default.conf" data-line="23"><code>server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    root /var/www/html;
    index index.php;

    location / {
        index  index.php;
    }

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    location ~ \.php$ {
        fastcgi_pass   localhost:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
    }
}</code></pre></div>



<p>上記のファイルを作成出来たら <code>docker compose up</code> で立ち上げ、ブラウザから <code>localhost</code> にアクセスします。あとは適当にポチポチと設定をしてログインします。</p>



<p>データベースの設定での注意点として、ホスト名は <code>localhost</code> ではなく <code>127.0.0.1</code> を指定してください。</p>




<a rel="noopener" href="https://dev.mysql.com/doc/refman/8.0/ja/connecting.html" title="MySQL :: MySQL 8.0 &#12522;&#12501;&#12449;&#12524;&#12531;&#12473;&#12510;&#12491;&#12517;&#12450;&#12523; :: 4.2.4 &#12467;&#12510;&#12531;&#12489;&#12458;&#12503;&#12471;&#12519;&#12531;&#12434;&#20351;&#29992;&#12375;&#12383; MySQL Server &#12408;&#12398;&#25509;&#32154;" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Fdev.mysql.com%2Fdoc%2Frefman%2F8.0%2Fja%2Fconnecting.html?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">MySQL :: MySQL 8.0 &#12522;&#12501;&#12449;&#12524;&#12531;&#12473;&#12510;&#12491;&#12517;&#12450;&#12523; :: 4.2.4 &#12467;&#12510;&#12531;&#12489;&#12458;&#12503;&#12471;&#12519;&#12531;&#12434;&#20351;&#29992;&#12375;&#12383; MySQL Server &#12408;&#12398;&#25509;&#32154;</div><div class="blogcard-snippet external-blogcard-snippet"></div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://dev.mysql.com/doc/refman/8.0/ja/connecting.html" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">dev.mysql.com</div></div></div></div></a>



<p>ログインしてダッシュボードまで辿り着いたら、WP-Cron の確認をします。WP Crontrol をインストールして設定画面を見てみると「cURL error 7: ~」のメッセージが表示されていないことが確認出来ます。</p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="173" data-id="3336" src="https://wptech.kiichiro.work/wp-content/uploads/2024/09/9bee04000217b9bc26441371a8ca5acd-1024x173.png" alt="WP Crontrol の Cron イベント画面でエラー通知が表示されていない" class="wp-image-3336" srcset="https://wptech.kiichiro.work/wp-content/uploads/2024/09/9bee04000217b9bc26441371a8ca5acd-1024x173.png 1024w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/9bee04000217b9bc26441371a8ca5acd-300x51.png 300w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/9bee04000217b9bc26441371a8ca5acd-768x130.png 768w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/9bee04000217b9bc26441371a8ca5acd-1536x260.png 1536w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/9bee04000217b9bc26441371a8ca5acd-2048x347.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</figure>



<p>一覧から適当なイベントの「今すぐ実行」をクリックすると通知が表示され、正常に実行されたことが確認出来ます。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="187" src="https://wptech.kiichiro.work/wp-content/uploads/2024/09/6f9e18e0d3dee9917f96a7c456ae717b-1024x187.png" alt="WP Crontrol の Cron イベント画面で正常終了した通知メッセージが表示されている" class="wp-image-3337" srcset="https://wptech.kiichiro.work/wp-content/uploads/2024/09/6f9e18e0d3dee9917f96a7c456ae717b-1024x187.png 1024w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/6f9e18e0d3dee9917f96a7c456ae717b-300x55.png 300w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/6f9e18e0d3dee9917f96a7c456ae717b-768x141.png 768w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/6f9e18e0d3dee9917f96a7c456ae717b-1536x281.png 1536w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/6f9e18e0d3dee9917f96a7c456ae717b-2048x375.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading"><span id="toc3">まとめと感想</span></h2>



<p>Docker Desktop でホストネットワーキングモードがサポートされたと聞いたときに真っ先にこのネタが浮かびましたが、一般的には安定感の無い WP-Cron をここまでして使いたいモチベーションは無いだろうなとも思いました。個人的には長年抱え続けてきた気持ち悪さが解決したので満足度は高いです。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【WordPress】ACFのJavaScript APIを使ってselect2フィールドをカスタマイズする</title>
		<link>https://wptech.kiichiro.work/629mgaoh70/</link>
		
		<dc:creator><![CDATA[むらおか]]></dc:creator>
		<pubDate>Tue, 02 Jul 2024 08:43:24 +0000</pubDate>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[コードリーディング]]></category>
		<guid isPermaLink="false">https://wptech.kiichiro.work/?p=3117</guid>

					<description><![CDATA[WordPress の カスタムフィールドのプラグインである ACF (Advanced Custom Fields) には、多数のフックや JavaScript API が用意されています。 ACF &#124; Resourc [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>WordPress の カスタムフィールドのプラグインである ACF (Advanced Custom Fields) には、多数のフックや JavaScript API が用意されています。</p>




<a rel="noopener" href="https://www.advancedcustomfields.com/resources" title="ACF | Resources, Documentation, API, How to &amp; Tutorial Articles" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://www.advancedcustomfields.com/wp-content/uploads/2024/11/acf-social-202411.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">ACF | Resources, Documentation, API, How to & Tutorial Articles</div><div class="blogcard-snippet external-blogcard-snippet">Discover code, documentation and ideas in this comprehensive resource section. Find everything from Getting Started, Fie...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://www.advancedcustomfields.com/resources/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">www.advancedcustomfields.com</div></div></div></div></a>




<a rel="noopener" href="https://www.advancedcustomfields.com/resources/javascript-api" title="ACF | JavaScript API" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://www.advancedcustomfields.com/wp-content/uploads/2024/11/acf-social-202411.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">ACF | JavaScript API</div><div class="blogcard-snippet external-blogcard-snippet">Learn how to use ACF&#039;s JavaScript library including functions, actions and filters and models.</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://www.advancedcustomfields.com/resources/javascript-api/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">www.advancedcustomfields.com</div></div></div></div></a>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-4" checked><label class="toc-title" for="toc-checkbox-4">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">やること</a></li><li><a href="#toc2" tabindex="0">準備</a></li><li><a href="#toc3" tabindex="0">コーディング</a></li><li><a href="#toc4" tabindex="0">まとめと感想</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">やること</span></h2>



<p>今回は、JavaScript API とフックの組み合わせで select2 フィールドをカスタマイズしてみます。具体的には、投稿のプルダウンをラジオボタンで選択したカテゴリーのみに絞って表示させる、ということをやってみます。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="869" height="609" src="https://wptech.kiichiro.work/wp-content/uploads/2024/06/b369a3c9b4aec3fe3c4118709b3019ae.png" alt="カテゴリーのラジオボタンと投稿オブジェクトのプルダウンが表示されている。ラジオボタンで選択したカテゴリーの投稿だけプルダウンに表示するようにする、という説明が入っている" class="wp-image-3122" srcset="https://wptech.kiichiro.work/wp-content/uploads/2024/06/b369a3c9b4aec3fe3c4118709b3019ae.png 869w, https://wptech.kiichiro.work/wp-content/uploads/2024/06/b369a3c9b4aec3fe3c4118709b3019ae-300x210.png 300w, https://wptech.kiichiro.work/wp-content/uploads/2024/06/b369a3c9b4aec3fe3c4118709b3019ae-768x538.png 768w" sizes="(max-width: 869px) 100vw, 869px" /></figure>



<h2 class="wp-block-heading"><span id="toc2">準備</span></h2>



<p>ACF でカテゴリーのラジオボタンと投稿のプルダウンを用意します。表示する条件は固定ページにしておきます。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="224" src="https://wptech.kiichiro.work/wp-content/uploads/2024/07/95bee59c1204c3775aeeee29604c35f0-1024x224.png" alt="ACFのフィールド。カテゴリーのラジオボタンと投稿の投稿オブジェクト" class="wp-image-3128" srcset="https://wptech.kiichiro.work/wp-content/uploads/2024/07/95bee59c1204c3775aeeee29604c35f0-1024x224.png 1024w, https://wptech.kiichiro.work/wp-content/uploads/2024/07/95bee59c1204c3775aeeee29604c35f0-300x66.png 300w, https://wptech.kiichiro.work/wp-content/uploads/2024/07/95bee59c1204c3775aeeee29604c35f0-768x168.png 768w, https://wptech.kiichiro.work/wp-content/uploads/2024/07/95bee59c1204c3775aeeee29604c35f0.png 1436w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>このときの各フィールドのキー (<code>field_667d1f74494c8</code> や <code>field_667d1d6343e57</code>) を控えておきます。</p>



<p>また、初期データとして、投稿とカテゴリーをいくつか用意しておきます。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="168" src="https://wptech.kiichiro.work/wp-content/uploads/2024/07/23f6e6de9d5fd3c97cdbf4f29655c3fa-1024x168.png" alt="固定ページ編集ページで表示されるカテゴリーと投稿のカスタムフィールド" class="wp-image-3131" srcset="https://wptech.kiichiro.work/wp-content/uploads/2024/07/23f6e6de9d5fd3c97cdbf4f29655c3fa-1024x168.png 1024w, https://wptech.kiichiro.work/wp-content/uploads/2024/07/23f6e6de9d5fd3c97cdbf4f29655c3fa-300x49.png 300w, https://wptech.kiichiro.work/wp-content/uploads/2024/07/23f6e6de9d5fd3c97cdbf4f29655c3fa-768x126.png 768w, https://wptech.kiichiro.work/wp-content/uploads/2024/07/23f6e6de9d5fd3c97cdbf4f29655c3fa-1536x252.png 1536w, https://wptech.kiichiro.work/wp-content/uploads/2024/07/23f6e6de9d5fd3c97cdbf4f29655c3fa.png 1906w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>投稿のプルダウンをクリックすると、全ての投稿が選択肢として表示されます。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="671" height="307" src="https://wptech.kiichiro.work/wp-content/uploads/2024/07/ac5e711ec26fce716af67d234a591730.png" alt="投稿のプルダウンクリック時に全ての投稿が選択肢として表示されている" class="wp-image-3135" srcset="https://wptech.kiichiro.work/wp-content/uploads/2024/07/ac5e711ec26fce716af67d234a591730.png 671w, https://wptech.kiichiro.work/wp-content/uploads/2024/07/ac5e711ec26fce716af67d234a591730-300x137.png 300w" sizes="(max-width: 671px) 100vw, 671px" /></figure>



<h2 class="wp-block-heading"><span id="toc3">コーディング</span></h2>



<p>select2 フィールドのプルダウンはクリックの都度、Ajax 通信で表示する選択肢を取得しています。この Ajax のリクエストに介入する JavaScript のフックに <code>select2_ajax_data</code> というのが用意されています。</p>




<a rel="noopener" href="https://www.advancedcustomfields.com/resources/javascript-api/#filters-select2_ajax_data" title="ACF | JavaScript API" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://www.advancedcustomfields.com/wp-content/uploads/2024/11/acf-social-202411.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">ACF | JavaScript API</div><div class="blogcard-snippet external-blogcard-snippet">Learn how to use ACF&#039;s JavaScript library including functions, actions and filters and models.</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://www.advancedcustomfields.com/resources/javascript-api/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">www.advancedcustomfields.com</div></div></div></div></a>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-file="acf-input.js" data-lang="JavaScript" data-line="25"><code>getAjaxData: function (params) {
  // vars
  var ajaxData = {
    action: this.get(&#39;ajaxAction&#39;),
    s: params.term || &#39;&#39;,
    paged: params.page || 1
  };

  // field helper
  var field = this.get(&#39;field&#39;);
  if (field) {
    ajaxData.field_key = field.get(&#39;key&#39;);
    if (field.get(&#39;nonce&#39;)) {
      ajaxData.nonce = field.get(&#39;nonce&#39;);
    }
  }

  // callback
  var callback = this.get(&#39;ajaxData&#39;);
  if (callback) {
    ajaxData = callback.apply(this, [ajaxData, params]);
  }

  // filter
  ajaxData = acf.applyFilters(&#39;select2_ajax_data&#39;, ajaxData, this.data, this.$el, field || false, this);

  // return
  return acf.prepareForAjax(ajaxData);
},</code></pre></div>



<p>このフックを使ってラジオボタンで選択されたカテゴリーの情報を POST に追加するようにします。適当な JS ファイルに以下の記述をします。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-file="acf-js-api-usage.js" data-lang="JavaScript"><code>// 素の JS
acf.add_filter(&#39;select2_ajax_data&#39;, function (data, args, $input, field, instance) {
    if (&#39;field_667d1d6343e57&#39; !== data.field_key) {
        // 投稿のプルダウンでなければ何もしない
        return data;
    }

    // カテゴリーのラジオボタンで選択された value を取得する
    const selectedCat = document.querySelector(&#39;input[name=&quot;acf[field_667d1f74494c8]&quot;]:checked&#39;);
    if (selectedCat) {
        data.cat = selectedCat.value;
    }
    return data;
});

// jQuery
jQuery(document).ready(function ($) {
    acf.add_filter(&#39;select2_ajax_data&#39;, function (data, args, $input, field, instance) {
        if (&#39;field_667d1d6343e57&#39; !== data.field_key) {
            return data;
        }
        const $selectedCat = $(&#39;input[name=&quot;acf[field_667d1f74494c8]&quot;]:checked&#39;);
        if ($selectedCat) {
            data.cat = $selectedCat.val();
        }
        return data;
    });
});</code></pre></div>



<p>フィールド作成時に控えておいたキーはユニークになっているので、セレクタとして使用しています。</p>



<p>次に、PHP 側のフックを使って、作成した JS ファイルの enqueue を行います。注意点として、ACF の JavaScript API を利用するには、ハンドル名 <code>acf-input</code> があらかじめ読み込まれている必要があるので、引数に追加するのを忘れないようにします。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP"><code>add_action(&#39;admin_enqueue_scripts&#39;, function ($hook_suffix) {
    if (&#39;post.php&#39; === $hook_suffix || &#39;post-new.php&#39; === $hook_suffix) {
        wp_register_script(&#39;acf-js-api-usage&#39;, plugin_dir_url(__FILE__) . &#39;/acf-js-api-usage.js&#39;, [&#39;acf-input&#39;]);
        wp_enqueue_script(&#39;acf-js-api-usage&#39;);
    }
});</code></pre></div>



<p>PHP 側では POST したカテゴリー情報をハンドリングする処理も必要です。ACF で、<code>acf/fields/post_object/query/key={$key}</code> というフックが用意されているので、これを利用します。</p>




<a rel="noopener" href="https://www.advancedcustomfields.com/resources/acf-fields-post_object-query" title="ACF | acf/fields/post_object/query" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://www.advancedcustomfields.com/wp-content/uploads/2024/11/acf-social-202411.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">ACF | acf/fields/post_object/query</div><div class="blogcard-snippet external-blogcard-snippet">Filters the $args used to query posts in the Post Object field.</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://www.advancedcustomfields.com/resources/acf-fields-post_object-query/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">www.advancedcustomfields.com</div></div></div></div></a>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP"><code>add_filter(&#39;acf/fields/post_object/query/key=field_667d1d6343e57&#39;, function($args, $field, $post_id) {
    $args[&#39;cat&#39;] = $_POST[&#39;cat&#39;];
    return $args;
}, 10, 3);</code></pre></div>



<p>このフィルターフックで返却する <code>$args</code> は最終的に WP_Query の引数になります。今回はカテゴリーで絞り込むので、POST した値を <code>$args['cat']</code> に代入します。</p>



<p>画面を確認してみると、ラジオボタンで選択したカテゴリーの投稿のみが表示されていることがわかります。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="554" height="294" src="https://wptech.kiichiro.work/wp-content/uploads/2024/07/d29dc7be02d3d11f0cd2b7f69423eb9b.png" alt="" class="wp-image-3157" srcset="https://wptech.kiichiro.work/wp-content/uploads/2024/07/d29dc7be02d3d11f0cd2b7f69423eb9b.png 554w, https://wptech.kiichiro.work/wp-content/uploads/2024/07/d29dc7be02d3d11f0cd2b7f69423eb9b-300x159.png 300w" sizes="(max-width: 554px) 100vw, 554px" /></figure>



<h2 class="wp-block-heading"><span id="toc4">まとめと感想</span></h2>



<p>今回、ACF のコードを数年ぶりに読みました。私にとって、WordPress のプラグインの中では読みやすい部類だと感じました。ドキュメントもしっかりメンテされている (と思っている) ので、迷子になることもなかったです。</p>



<p>ACF の JavaScript API とフックは、設定画面では出来ないようなフィールドの複雑なカスタマイズやフィールドの表示条件を動的に変更することが出来るので、わりと便利な機能だと思っています。ただ、認知度が低い気がします。日本語の記事もほとんど見当たらなかったですし。だいぶニッチな機能なので仕方ないと言えばそうなのですが。。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【WordPress】WordPressプラグインを強制的に無効化にするSQL</title>
		<link>https://wptech.kiichiro.work/78pzktw3na/</link>
		
		<dc:creator><![CDATA[むらおか]]></dc:creator>
		<pubDate>Tue, 28 Feb 2023 08:28:52 +0000</pubDate>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://wptech.kiichiro.work/?p=1427</guid>

					<description><![CDATA[何度もやってしまったので備忘録として。。。 はじめに WordPressでインストールしたプラグインの不具合が原因で WSoD(真っ白な画面) が発生したり、SiteGuardでログインページを忘れてしまったりして、正常 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>何度もやってしまったので備忘録として。。。</p>



<h1 class="wp-block-heading">はじめに</h1>



<p>WordPressでインストールしたプラグインの不具合が原因で WSoD(真っ白な画面) が発生したり、SiteGuardでログインページを忘れてしまったりして、正常なログインが出来なくなってしまった場合の対処方法として、プラグインを強制的に無効化する方法があります。</p>



<p>プラグインを無効化する方法として以下の2点が考えられます。</p>



<ol class="wp-block-list">
<li><code>wp-content/plugins</code> 配下の該当プラグインディレクトリ (または全てのプラグインディレクトリ)を削除する</li>



<li><code>wp_options</code> に保存された有効化されたプラグイン情報を空にする</li>
</ol>



<p>本稿では、2について記載します。</p>



<h1 class="wp-block-heading">手順</h1>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-6" checked><label class="toc-title" for="toc-checkbox-6">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"></li><li><a href="#toc1" tabindex="0"> MySQLにログインする</a></li><li><a href="#toc2" tabindex="0">active_plugins の更新</a></li><li><a href="#toc3" tabindex="0">WordPressにログインしてプラグインを有効化する</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1"> MySQLにログインする</span></h2>



<p>大半のWordPressはMySQL(またはMariaDB)だと思いますので以下でログイン出来ます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ mysql -u &lt;user_name&gt; -p &lt;database_name&gt;
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.</code></pre></div>



<p>ログインに必要なユーザーとパスワードはDBのセットアップ時に設定したものを使います。Amazon Lightsailを使っている場合は <code>/home/bitnami/bitnami_application_password</code> にパスワードの記載があります。<br>データベース名が不明な場合は指定せずに <code>show databases</code> でそれっぽいのを見つけるのもありかと。</p>



<h2 class="wp-block-heading"><span id="toc2">active_plugins の更新</span></h2>



<p>有効になっているプラグインは <code>wp_options</code> の option_name = &#8216;active_plugins&#8217; にシリアライズして保存されているので、ここを空で書き換えます。実際に流すSQLは以下。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-sql" data-lang="SQL"><code>BEGIN;
SELECT * FROM wp_options WHERE option_name = &#39;active_plugins&#39;;
UPDATE wp_options SET option_value = ‘a:0:{}’ WHERE option_name = ‘active_plugins’;
SELECT * FROM wp_options WHERE option_name = &#39;active_plugins&#39;;
#COMMIT;</code></pre></div>



<h2 class="wp-block-heading"><span id="toc3">WordPressにログインしてプラグインを有効化する</span></h2>



<p>上記の方法ではプラグインを一括無効化したのと同じことになるので、管理画面からプラグインを有効化する必要があります。<br>このとき、以下の2点に注意する必要があります。</p>



<ul class="wp-block-list">
<li>不具合(WSoDなど)の出ているプラグインを再度有効化する前に原因を取り除くこと
<ul class="wp-block-list">
<li>取り除かないまま有効化すると同じことを何度もすることになる。。</li>
</ul>
</li>



<li>プラグインによっては、<code>register_activation_hook</code> で設定値の初期化処理を行っているものがある
<ul class="wp-block-list">
<li>その場合はプラグイン無効化以前に設定した値に戻す必要がある</li>
</ul>
</li>
</ul>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【WordPress】WordPressのサイトでLCPを改善する</title>
		<link>https://wptech.kiichiro.work/39hrulvz3h/</link>
		
		<dc:creator><![CDATA[むらおか]]></dc:creator>
		<pubDate>Fri, 16 Dec 2022 09:39:24 +0000</pubDate>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://wptech.kiichiro.work/?p=1012</guid>

					<description><![CDATA[長かったLCPとの戦いが一段落ついたので備忘録的に。 はじめに LCP (Largest Contentful Paint) は、PageSpeed Insights (Lighthouse) で計測されるパフォーマンス [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>長かったLCPとの戦いが一段落ついたので備忘録的に。</p>



<h1 class="wp-block-heading">はじめに</h1>



<p>LCP (Largest Contentful Paint) は、PageSpeed Insights (Lighthouse) で計測されるパフォーマンスに関する指標の1つです。Googleが重要としている健全なウェブサイトであることを測る3つの指標 「Core Web Vitals」 のうちの1つでもあります。</p>




<a rel="noopener" href="https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/" title="Largest Contentful Paint  |  Lighthouse  |  Chrome for Developers" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Fdeveloper.chrome.com%2Fdocs%2Flighthouse%2Fperformance%2Flighthouse-largest-contentful-paint%2F?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Largest Contentful Paint  |  Lighthouse  |  Chrome for Developers</div><div class="blogcard-snippet external-blogcard-snippet">Learn about Lighthouse&#039;s Largest Contentful Paint metric and how to measure and optimize it.</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">developer.chrome.com</div></div></div></div></a>



<p>LCPはビューポート内に表示される最も大きいコンテンツのレンダリングにかかった時間(秒)が値としてレポートされ、これが2.5秒以内であれば良好であると判断されます。さらにPageSpeed Insights のモバイルの診断はローエンドモバイルかつ低速回線でスロットリングされるため、思った以上に遅くレポートされることが多いと思われます。</p>



<p>今回はWordPressで構築されたサイトで行ったLCP改善の施策を整理していきます。</p>



<h1 class="wp-block-heading">やったこと</h1>



<p>Googleのドキュメントを読んだり、Lighthouseの結果からおすすめされた施策を試してみて効果の高かったものを列挙していきます。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-8" checked><label class="toc-title" for="toc-checkbox-8">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"></li><li><a href="#toc1" tabindex="0">キャッシュを有効化する</a><ol><li><a href="#toc2" tabindex="0">キャッシュ系プラグインを使う</a></li><li><a href="#toc3" tabindex="0">CDNを使う</a></li></ol></li><li><a href="#toc4" tabindex="0">JavaScriptの読み込み時間を削減する</a><ol><li><a href="#toc5" tabindex="0">読み込みを遅延させるプラグインを使う</a></li></ol></li><li><a href="#toc6" tabindex="0">使っていないJavaScriptを読み込まない</a></li><li><a href="#toc7" tabindex="0">投稿の構成を変える</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">キャッシュを有効化する</span></h2>



<p>標準のWordPressは投稿を表示する際に毎回サーバーサイドでPHPを実行するようになっています。投稿データはDBに永続化されており、その投稿データをテンプレートに渡して描画することになります。<br>このPHPの処理とDBへのアクセスがパフォーマンスのボトルネックになりやすいため、キャッシュをすることでこれを減らそうという試みです。</p>



<h3 class="wp-block-heading"><span id="toc2">キャッシュ系プラグインを使う</span></h3>



<p>キャッシュ系プラグインはプラグイン毎にキャッシュの仕組みが異なります。<a href="https://wptech.kiichiro.work/966iksg49s/" data-type="post" data-id="801">「永続オブジェクトキャッシュを使用してください」が気になったのでコアを覗いてみた</a> で触れたオブジェクトキャッシュはメモリ上のキャッシュでサーバーサイドのPHPの処理を高速化しますが、今回は後述するCDNとの相性を考慮して WP Fastest Cache を使用しました。</p>




<a rel="noopener" href="https://ja.wordpress.org/plugins/wp-fastest-cache/" title="WP Fastest Cache" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Fja.wordpress.org%2Fplugins%2Fwp-fastest-cache%2F?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">WP Fastest Cache</div><div class="blogcard-snippet external-blogcard-snippet">最もシンプルで速いWP キャッシュシステム</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://ja.wordpress.org/plugins/wp-fastest-cache/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">ja.wordpress.org</div></div></div></div></a>



<p>WP Fastest Cache はキャッシュの設定を有効化することで投稿データをhtmlファイルに出力します。htmlファイルが一度生成されると以降はそのhtmlファイルを直接読み込むことになります。<br>これにより、PHPの実行とDBへのアクセスの回数が削減され、パフォーマンスの改善が見込まれます。</p>



<h3 class="wp-block-heading"><span id="toc3">CDNを使う</span></h3>



<p>CDNはコンテンツをクライアントに近いエッジロケーションから配信する仕組みで、コンテンツを保持するサーバーへのリクエストは行わず、コンテンツをキャッシュしたサーバーがコンテンツを返します。元々のコンテンツを保持するサーバーをオリジンと呼びます。<br>利用するCDNと設定によってキャッシュの動作は変わってきますが、WordPressではパスパターンでのキャッシュを採用することが多いかと思われます。</p>



<p>キャッシュ系プラグインの WP Fastest Cache は、<code>wp-content/cache</code> 配下に投稿データのhtmlを出力しますし、画像ファイルは <code>wp-content/uploads</code> 、大抵のテーマやプラグインが生成する独自の静的ファイル群も概ね <code>wp-content</code> 配下ですので、<code>wp-content</code> 配下をキャッシュできる設定が効果的かと思います。</p>



<p>ちなみにAWS Lightsail ではWordPress最適設定として、<code>wp-includes/*</code> と <code>wp-content/*</code> をキャッシュ対象としています。</p>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="888" height="300" src="https://wptech.kiichiro.work/wp-content/uploads/2022/12/image-1.webp" alt="AWS Lightsail のCDNのキャッシュのパスパターン" class="wp-image-1135" srcset="https://wptech.kiichiro.work/wp-content/uploads/2022/12/image-1.webp 888w, https://wptech.kiichiro.work/wp-content/uploads/2022/12/image-1-300x101.webp 300w, https://wptech.kiichiro.work/wp-content/uploads/2022/12/image-1-768x259.webp 768w" sizes="(max-width: 888px) 100vw, 888px" /></figure>



<h2 class="wp-block-heading"><span id="toc4">JavaScriptの読み込み時間を削減する</span></h2>



<p>JavaScriptファイルのサイズを減らしたり、読み込みを遅延させることはパフォーマンス改善に繋がります。JavaScriptの読み込みはダウンロードだけではなくブラウザによる解析やコンパイルといったオーバーヘッドが関わってくるため、同程度のサイズの画像より処理コストが高く時間がかかるのだそうです。</p>




<a rel="noopener" href="https://web.dev/optimizing-content-efficiency-javascript-startup-optimization/" title="JavaScript Start-up Optimization  |  Articles  |  web.dev" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Fweb.dev%2Foptimizing-content-efficiency-javascript-startup-optimization%2F?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">JavaScript Start-up Optimization  |  Articles  |  web.dev</div><div class="blogcard-snippet external-blogcard-snippet">Keep your network transmission and parse/compile cost for JavaScript low to ensure pages get interactive quickly.</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://web.dev/optimizing-content-efficiency-javascript-startup-optimization/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">web.dev</div></div></div></div></a>



<h3 class="wp-block-heading"><span id="toc5">読み込みを遅延させるプラグインを使う</span></h3>



<p>Google Analytics や Google Tag Manager と連携している場合は、該当のイベントを発火するjsの読み込みが発生します。このjsの読み込みに時間がかかってしまうようです。Lighthouseでは改善方法としてjs自体の削減か読み込みを遅延させることを提案されます。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="289" src="https://wptech.kiichiro.work/wp-content/uploads/2022/12/image-2-1024x289.webp" alt="使用していない JavaScript の削減 をおすすめされている" class="wp-image-1175" srcset="https://wptech.kiichiro.work/wp-content/uploads/2022/12/image-2-1024x289.webp 1024w, https://wptech.kiichiro.work/wp-content/uploads/2022/12/image-2-300x85.webp 300w, https://wptech.kiichiro.work/wp-content/uploads/2022/12/image-2-768x217.webp 768w, https://wptech.kiichiro.work/wp-content/uploads/2022/12/image-2-1536x434.webp 1536w, https://wptech.kiichiro.work/wp-content/uploads/2022/12/image-2.webp 1926w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>該当のjsの enqueue を遅延させれば良いのですが、Google系サービスとの連携はプラグインを利用しているケースが多いと思いますので愚直にやろうとすると骨が折れそうです。</p>



<p>Flying Scripts では、遅延読み込みさせたいjsのキーワードを設定することで該当のjsを(おそらく部分一致で)特定し、指定した秒数だけ読み込みを遅らせることができます。</p>




<a rel="noopener" href="https://ja.wordpress.org/plugins/flying-scripts/" title="Flying Scripts: Delay JavaScript to Improve Site Speed &amp; Performance" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Fja.wordpress.org%2Fplugins%2Fflying-scripts%2F?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Flying Scripts: Delay JavaScript to Improve Site Speed & Performance</div><div class="blogcard-snippet external-blogcard-snippet">Delay JavaScript to improve speed and performance by loading scripts only when needed, reducing render-blocking for a fa...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://ja.wordpress.org/plugins/flying-scripts/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">ja.wordpress.org</div></div></div></div></a>



<p>Tag Manager だったら↓このように設定すればOK。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="188" src="https://wptech.kiichiro.work/wp-content/uploads/2022/12/image-3-1024x188.webp" alt="Flying Scripts の設定画面で keyword を指定している" class="wp-image-1204" srcset="https://wptech.kiichiro.work/wp-content/uploads/2022/12/image-3-1024x188.webp 1024w, https://wptech.kiichiro.work/wp-content/uploads/2022/12/image-3-300x55.webp 300w, https://wptech.kiichiro.work/wp-content/uploads/2022/12/image-3-768x141.webp 768w, https://wptech.kiichiro.work/wp-content/uploads/2022/12/image-3-1536x282.webp 1536w, https://wptech.kiichiro.work/wp-content/uploads/2022/12/image-3.webp 1668w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>仕組みとしては、指定された秒数が経過したあとにDOMに突っ込んでいるようで、結構な力技でした。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="inject-js.php" data-lang="PHP"><code>const loadScriptsTimer = setTimeout(loadScripts,&lt;?php echo $timeout ?&gt;* 1000</code></pre></div>



<p>注意点としては、上記の通り力技なので Tag Manager の設定によってはタグのイベントが発火されない可能性があるかもしれません。十分にテストを行った方が良さそうです。</p>



<h2 class="wp-block-heading"><span id="toc6">使っていないJavaScriptを読み込まない</span></h2>



<p>テーマやプラグインによっては標準で enqueue されているjsがあるかと思いますが、そのjsを使っている機能が一部だけで該当機能を使わない場合はjsを読み込まないようにするということも出来ます。<br>例えば、カルーセル機能を有したウィジェットのために読み込まれている Slick.js は、当該ウィジェットを利用しなければ不要なはずです。</p>



<p>こちらは <code>functions.php</code> に数行追加するだけでOKです。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="functions.php" data-lang="PHP"><code>function deregister_unnecessary_scripts() {
  wp_deregister_script(&#39;handle&#39;);
}
// 注意: hookのタイミングはenqueueされた後である必要がある
add_action(&#39;wp_enqueue_scripts&#39;, &#39;deregister_unnecessary_scripts&#39;);</code></pre></div>



<h2 class="wp-block-heading"><span id="toc7">投稿の構成を変える</span></h2>



<p>冒頭にも書きましたが、LCPはファーストビューで読み込まれるコンテンツのうち、最もサイズの大きい要素の読み込みにかかった時間です。よって、サイズの大きいものはファーストビューに含めないという方法もありかと思います。単純にサムネイルをタイトルの直下に配置しないとかが考えられます。</p>



<h1 class="wp-block-heading">おわりに</h1>



<p>LCP改善をやってみて、WordPressで対策するのは様々な工夫が必要だなと感じました。結局はテーマやプラグインに依存するところが多いですので、今回記載した施策がすべてに当てはまるものでは無いかと思います。また、「画像を WebP に変換する」「静的ファイルをminifyする」など、記載しなかった施策もいくつかあります。このあたりは別の機会にまとめられれば。。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【WordPress】「永続オブジェクトキャッシュを使用してください」が気になったのでコアを覗いてみた</title>
		<link>https://wptech.kiichiro.work/966iksg49s/</link>
		
		<dc:creator><![CDATA[むらおか]]></dc:creator>
		<pubDate>Wed, 30 Nov 2022 16:50:14 +0000</pubDate>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[コードリーディング]]></category>
		<guid isPermaLink="false">http://13.115.157.198/?p=801</guid>

					<description><![CDATA[はじめに WordPress 6.1から、サイトヘルスステータスにて永続オブジェクトキャッシュの使用がレコメンドされるようになったようです。 こちらの対応としては、ホスティングプロバイダーが提供するキャッシュサーバーを確 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<h1 class="wp-block-heading">はじめに</h1>



<p>WordPress 6.1から、サイトヘルスステータスにて永続オブジェクトキャッシュの使用がレコメンドされるようになったようです。</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://wptech.kiichiro.work/wp-content/uploads/2022/11/d2dd353fa2093e3321c1b6f535d89cfb-1024x306.png" alt="永続オブジェクトキャッシュを使用してくださいという、サイトヘルスステータスの結果が記載されています"/></figure>



<p>こちらの対応としては、ホスティングプロバイダーが提供するキャッシュサーバーを確認し、 W3 Total Cache Plugin などのキャッシュ系プラグインを介してオブジェクトキャッシュを使用する設定を行う、ということになるようです。<br><a rel="noopener" href="https://ja.wordpress.org/support/article/optimization/#persistent-object-cache" target="_blank">https://ja.wordpress.org/support/article/optimization/#persistent-object-cache</a></p>



<p>気になったので、今回はサイトヘルスステータスで何をチェックしているかを見ていきます。</p>



<p>※オブジェクトキャッシュが何をしているか、というところまでは言及しません。</p>



<h1 class="wp-block-heading">コードを読む</h1>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-10" checked><label class="toc-title" for="toc-checkbox-10">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"></li><li><a href="#toc1" tabindex="0">コアコードを読む</a></li><li><a href="#toc2" tabindex="0">プラグインのコードを読む</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">コアコードを読む</span></h2>



<p>サイトヘルスステータスでテストする項目は <code>WP_Site_Health::get_tests</code> で列挙されています。<br>6.1から追加されたのは、 <code>persistent_object_cache</code> というテストです。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="class-wp-site-health.php" data-lang="PHP"><code>$tests[&#39;direct&#39;][&#39;persistent_object_cache&#39;] = array(
    &#39;label&#39; =&gt; __( &#39;Persistent object cache&#39; ),
    &#39;test&#39;  =&gt; &#39;persistent_object_cache&#39;,
);</code></pre></div>



<p>ここに列挙されているテストは <code>get_test_</code> というprefixがついたfunctionとして用意されており、サイトヘルスステータスの画面を開くたびに実行されます。<br>今回の場合だと、 <code>get_test_persistent_object_cache</code> というfunctionになります。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="class-wp-site-health.php" data-lang="PHP"><code>/**
 * Tests if the site uses persistent object cache and recommends to use it if not.
 *
 * @since 6.1.0
 *
 * @return array The test result.
 */
public function get_test_persistent_object_cache() {
(省略)
    if ( wp_using_ext_object_cache() ) {
        return $result;
    }
(省略)
    return $result;
}</code></pre></div>



<p>どうやらこのfunction内で呼び出している <code>wp_using_ext_object_cache</code> というfunctionでオブジェクトキャッシュの判定を行っているようです。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="load.php" data-lang="PHP"><code>/**
 * Toggle `$_wp_using_ext_object_cache` on and off without directly
 * touching global.
 *
 * @since 3.7.0
 *
 * @global bool $_wp_using_ext_object_cache
 *
 * @param bool $using Whether external object cache is being used.
 * @return bool The current &#39;using&#39; setting.
 */
function wp_using_ext_object_cache( $using = null ) {
	global $_wp_using_ext_object_cache;
	$current_using = $_wp_using_ext_object_cache;
	if ( null !== $using ) {
		$_wp_using_ext_object_cache = $using;
	}
	return $current_using;
}</code></pre></div>



<p>ここでは、globalの <code>$_wp_using_ext_object_cache</code> が初期化されているかどうかを判定しています。<br>初期化処理は <code>load.php</code> の <code>wp_start_object_cache</code> というfunction内で行っています。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="load.php" data-lang="PHP"><code>/**
 * Start the WordPress object cache.
 *
 * If an object-cache.php file exists in the wp-content directory,
 * it uses that drop-in as an external object cache.
 *
 * @since 3.0.0
 * @access private
 *
 * @global array $wp_filter Stores all of the filters.
 */
function wp_start_object_cache() {
	global $wp_filter;
	static $first_init = true;

	// Only perform the following checks once.

	/**
	 * Filters whether to enable loading of the object-cache.php drop-in.
	 *
	 * This filter runs before it can be used by plugins. It is designed for non-web
	 * runtimes. If false is returned, object-cache.php will never be loaded.
	 *
	 * @since 5.8.0
	 *
	 * @param bool $enable_object_cache Whether to enable loading object-cache.php (if present).
	 *                                  Default true.
	 */
	if ( $first_init && apply_filters( &#39;enable_loading_object_cache_dropin&#39;, true ) ) {
		if ( ! function_exists( &#39;wp_cache_init&#39; ) ) {
			/*
			 * This is the normal situation. First-run of this function. No
			 * caching backend has been loaded.
			 *
			 * We try to load a custom caching backend, and then, if it
			 * results in a wp_cache_init() function existing, we note
			 * that an external object cache is being used.
			 */
			if ( file_exists( WP_CONTENT_DIR . &#39;/object-cache.php&#39; ) ) {
				require_once WP_CONTENT_DIR . &#39;/object-cache.php&#39;;
				if ( function_exists( &#39;wp_cache_init&#39; ) ) {
					wp_using_ext_object_cache( true );
				}
(省略)
}</code></pre></div>



<p><code>wp_cache_init</code> は <code>cache.php</code> 内で定義されていますが、この時点では読み込まれていません。<br>wp-content 配下に <code>object-cache.php</code> が存在する場合は読み込む、(その中で) <code>wp_cache_init</code> が定義されていれば、<code>wp_using_ext_object_cache</code> にtrueを渡し、<code>$_wp_using_ext_object_cache</code> をtrueで初期化する、という流れになっています。</p>



<h2 class="wp-block-heading"><span id="toc2">プラグインのコードを読む</span></h2>



<p>ということで、この <code>object-cache.php</code> が肝であることがわかったのですが、このファイルはコアコードには存在しません。<br>ではどこに存在するかというと、オブジェクトキャッシュを提供する各プラグイン内のようです。</p>



<p>以下は W3 Total Cache Plugin を有効化すると生成される <code>object-cache.php</code> です。<br>この中で <code>wp_cache_init</code> が定義されています。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="object-cache.php" data-lang="PHP"><code>/**
 * Init cache
 *
 * @return void
 */
function wp_cache_init() {
    $GLOBALS[&#39;wp_object_cache&#39;] =
        \W3TC\Dispatcher::component( &#39;ObjectCache_WpObjectCache&#39; );
}</code></pre></div>



<p>リファレンスにもある通り、、オブジェクトキャッシュ提供するプラグインをインストールしない限りオブジェクトキャッシュは非永続であるとのことだそうです。</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>By default, the object cache is non-persistent. This means that data stored in the cache resides in memory only and only for the duration of the request. Cached data will not be stored persistently across page loads unless you install a&nbsp;<a href="https://developer.wordpress.org/reference/classes/wp_object_cache/#persistent-caching">persistent caching</a>&nbsp;plugin.</p>
<cite>https://developer.wordpress.org/reference/classes/wp_object_cache/</cite></blockquote>



<h1 class="wp-block-heading">おわりに</h1>



<p>サイトヘルスステータスでは、オブジェクトキャッシュのプラグインを利用しているかどうかをチェックして永続オブジェクトキャッシュの利用を判定していました。<br>そもそも永続オブジェクトキャッシュはWordPress標準では提供しておらず、利用したければプラグインをインストールすること、そしてそれを推奨しているようです(ver 6.1以降)。<br>言い換えると、オブジェクトキャッシュ自体は抽象化されおり、各ホスティングプロバイダーの都合によって独自実装する余地を残しているとも言えるかと思います。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【Laravel】CorcelでWordPressの投稿をLaravelで使う</title>
		<link>https://wptech.kiichiro.work/81qpjbjun6/</link>
		
		<dc:creator><![CDATA[むらおか]]></dc:creator>
		<pubDate>Sun, 13 Nov 2022 16:44:14 +0000</pubDate>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[Docker]]></category>
		<category><![CDATA[Laravel]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">http://13.115.157.198/?p=647</guid>

					<description><![CDATA[WordPressの投稿をLaravelで扱ってみます。 Corcel GitHub - corcel/corcel: Use WordPress backend with Laravel or any PHP appl [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>WordPressの投稿をLaravelで扱ってみます。</p>



<h1 class="wp-block-heading">Corcel</h1>




<a rel="noopener" href="https://github.com/corcel/corcel" title="GitHub - corcel/corcel: Use WordPress backend with Laravel or any PHP application" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://wptech.kiichiro.work/wp-content/uploads/cocoon-resources/blog-card-cache/44ee7dbcd5b1b2946474fc25612012fd." alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">GitHub - corcel/corcel: Use WordPress backend with Laravel or any PHP application</div><div class="blogcard-snippet external-blogcard-snippet">Use WordPress backend with Laravel or any PHP application - corcel/corcel</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://github.com/corcel/corcel" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">github.com</div></div></div></div></a>



<p>CorcelはEloquent ORMを利用してWordPressのデータを操作するインタフェースを提供しています。WordPresのデータベースへは直接接続することになります。<br>これまで、静的化WordPressの文脈でwp-json(WP REST API)を利用したデータ操作は見たことがありましたが、Corcelであればwp-jsonの仕様を意識することなく利用することが可能なようです。</p>



<h1 class="wp-block-heading">環境構築</h1>



<p>LaravelとWordPressの環境をそれぞれ構築する必要があります。構築が楽なのでDockerを利用します。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-12" checked><label class="toc-title" for="toc-checkbox-12">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"></li><li><a href="#toc1" tabindex="0">Laravel</a></li><li><a href="#toc2" tabindex="0">WordPress</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">Laravel</span></h2>



<p>Laravelのプロジェクトを新規に作成します (割愛)。</p>



<p>composerでCorcelをinstallします。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ composer require jgrossi/corcel</code></pre></div>



<p>serveはsailで実施するとdocker-compose.ymlで必要なnetworksを定義してくれるので、それを使うのが良いかと思います。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ ./vendor/bin/sail up -d
$ ./vendor/bin/sail artisan sail:publish</code></pre></div>



<p>configは <code>corcel.php</code> と <code>database.php</code> を修正します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="config/corcel.php" data-lang="PHP"><code>&#39;connection&#39; =&gt; &#39;wordpress&#39;,</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="config/database.php" data-lang="PHP"><code>// &#39;connections&#39; に以下を追加
&#39;wordpress&#39; =&gt; [
    &#39;driver&#39; =&gt; &#39;mysql&#39;,
    &#39;host&#39; =&gt; env(&#39;WP_DB_HOST&#39;, &#39;127.0.0.1&#39;),
    &#39;port&#39; =&gt; env(&#39;WP_DB_PORT&#39;, &#39;3306&#39;),
    &#39;database&#39; =&gt; env(&#39;WP_DB_DATABASE&#39;, &#39;wordpress&#39;),
    &#39;username&#39; =&gt; env(&#39;WP_DB_USERNAME&#39;, &#39;wordpress&#39;),
    &#39;password&#39; =&gt; env(&#39;WP_DB_PASSWORD&#39;, &#39;&#39;),
    &#39;charset&#39; =&gt; &#39;utf8&#39;,
    &#39;collation&#39; =&gt; &#39;utf8_unicode_ci&#39;,
    &#39;prefix&#39; =&gt; &#39;wp_&#39;,
    &#39;strict&#39; =&gt; false,
    &#39;engine&#39; =&gt; null,
],</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file=".env"><code>WP_DB_CONNECTION=mysql
WP_DB_HOST=db
WP_DB_PORT=3306
WP_DB_DATABASE=wordpress
WP_DB_USERNAME=wordpress
WP_DB_PASSWORD=wordpress</code></pre></div>



<h2 class="wp-block-heading"><span id="toc2">WordPress</span></h2>



<p>公式にWordPressのクイックスタートがあるのでそれを利用します。</p>




<a rel="noopener" href="https://docs.docker.jp/compose/wordpress.html" title="&#12463;&#12451;&#12483;&#12463;&#12473;&#12479;&#12540;&#12488;: Compose &#12392; WordPress &mdash; Docker-docs-ja 24.0 &#12489;&#12461;&#12517;&#12513;&#12531;&#12488;" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Fdocs.docker.jp%2Fcompose%2Fwordpress.html?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">&#12463;&#12451;&#12483;&#12463;&#12473;&#12479;&#12540;&#12488;: Compose &#12392; WordPress &mdash; Docker-docs-ja 24.0 &#12489;&#12461;&#12517;&#12513;&#12531;&#12488;</div><div class="blogcard-snippet external-blogcard-snippet"></div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://docs.docker.jp/compose/wordpress.html" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">docs.docker.jp</div></div></div></div></a>



<p>networksは <code><strong>{Laravelのディレクトリ名}_sail</strong></code> を指定します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>version: &#39;3&#39;

services:
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    networks:
      - external

  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - &quot;8000:80&quot;
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
    networks:
      - external
networks:
  external:
    driver: bridge
    name: {Laravelのディレクトリ名}_sail
volumes:
  db_data:</code></pre></div>



<h1 class="wp-block-heading">実行</h1>



<p>リクエストに対してWordPressの投稿を出力させてみます。コンテンツはWordPressの初期コンテンツを利用します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="routes/web.php" data-lang="PHP"><code>Route::get(&#39;posts/{post_id}&#39;, function (int $postId) {
    $post = Post::query()-&gt;find($postId);
    return view(&#39;posts.show&#39;, compact(&#39;post&#39;));
});</code></pre></div>



<p>WordPressの投稿は <code>post_content</code> にHTMLがそのまま入っているのでそのまま出力します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="resources/views/posts/show.blade.php" data-lang="PHP"><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;{{ str_replace(&#39;_&#39;, &#39;-&#39;, app()-&gt;getLocale()) }}&quot;&gt;
    &lt;head&gt;
        &lt;title&gt;{{ $post-&gt;post_title }}&lt;/title&gt;
    &lt;body&gt;
        &lt;div&gt;
            {!! $post-&gt;post_content !!}
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre></div>



<p>ブラウザでアクセスすると、投稿を取得できていることが確認できます。</p>



<figure class="wp-block-image size-large is-style-default"><img decoding="async" src="https://wptech.kiichiro.work/wp-content/uploads/2022/11/251804846e95cfed0ddb7d673c51af77-1024x50.png" alt="ブラウザの表示"/></figure>



<p>curlするとブロックエディタ用の <code>&lt;! -- wp:paragraph --&gt;</code> も取得できていることがわかります。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ curl http://localhost/posts/1
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
        &lt;title&gt;Hello world!&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div&gt;
            &lt;!-- wp:paragraph --&gt;
&lt;p&gt;WordPress へようこそ。こちらは最初の投稿です。編集または削除し、コンテンツ作成を始めてください。&lt;/p&gt;
&lt;!-- /wp:paragraph --&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre></div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>ロードバランサーの後ろにAmazon Lightsailを配置して常時SSL対応する</title>
		<link>https://wptech.kiichiro.work/43nyielz64/</link>
		
		<dc:creator><![CDATA[むらおか]]></dc:creator>
		<pubDate>Mon, 17 Jan 2022 15:37:25 +0000</pubDate>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[AWS]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">http://13.115.157.198/?p=269</guid>

					<description><![CDATA[Apacheの設定ファイルを久々にいじったので備忘として。 やりたいこと やりたかったこと・やったこと ALBであればHTTPSのリスナーのみを作成するだけで事足りる(そもそもHTTPを空けない)のですが、Lightsa [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Apacheの設定ファイルを久々にいじったので備忘として。</p>



<span id="more-269"></span>



<h1 class="wp-block-heading">やりたいこと</h1>



<ol class="wp-block-list">
<li>AWS Lightsail でWordPressをインストールしたインスタンスを立てる</li>



<li>インスタンスの手前にロードバランサー (Lightsail) を立て、ターゲットをインスタンスに向ける</li>



<li>HTTPアクセスが発生した場合はHTTPSにリダイレクトさせる</li>
</ol>



<h1 class="wp-block-heading">やりたかったこと・やったこと</h1>



<p>ALBであればHTTPSのリスナーのみを作成するだけで事足りる(そもそもHTTPを空けない)のですが、Lightsail で立てたロードバランサーではデフォルトでHTTPも空いてしまうようでした。</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://wptech.kiichiro.work/wp-content/uploads/2022/01/bfa684cecd110c9f1a0dd6c246f24dd1.png" alt=""/></figure>



<p>あるいは、HTTPをHTTPSにリダイレクトするという設定のみでできますが、そこまで細かい設定はできないようです。</p>



<p>以下はCLBの例ですが、ロードバランサーで設定ができないようであればWebサーバーで設定する必要があります。</p>




<a rel="noopener" href="https://aws.amazon.com/jp/premiumsupport/knowledge-center/redirect-http-https-elb/" title="Elastic Load Balancing を使用して HTTP トラフィックを HTTPS にリダイレクトする" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Faws.amazon.com%2Fjp%2Fpremiumsupport%2Fknowledge-center%2Fredirect-http-https-elb%2F?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Elastic Load Balancing を使用して HTTP トラフィックを HTTPS にリダイレクトする</div><div class="blogcard-snippet external-blogcard-snippet">Elastic Load Balancing (ELB) Classic Load Balancer で HTTP リスナーと HTTPS リスナーを使用しています。Classic Load Balancer は SSL をオフロードし、バ...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://aws.amazon.com/jp/premiumsupport/knowledge-center/redirect-http-https-elb/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">aws.amazon.com</div></div></div></div></a>



<p>Lightsailであれば <code>/opt/bitnami/apache/conf/vhosts</code> あたりに設定ファイルがあるので、VirtualHostセクションの中に以下の記述をすればOKです。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file=" wordpress-vhost.conf"><code>RewriteEngine on
RewriteCond %{HTTP:X-Forwarded-Proto} !=https
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]</code></pre></div>



<p>ちなみにここで言っている X-Forwarded-Protoヘッダはロードバランサーへアクセスされたプロトコルが入ってくるみたいです。</p>




<a rel="noopener" href="https://docs.aws.amazon.com/ja_jp/elasticloadbalancing/latest/application/x-forwarded-headers.html#x-forwarded-proto" title="HTTP &#12504;&#12483;&#12480;&#12540;&#12392; Application Load Balancer - ELB" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Fdocs.aws.amazon.com%2Fja_jp%2Felasticloadbalancing%2Flatest%2Fapplication%2Fx-forwarded-headers.html%23x-forwarded-proto?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">HTTP &#12504;&#12483;&#12480;&#12540;&#12392; Application Load Balancer - ELB</div><div class="blogcard-snippet external-blogcard-snippet">ELB の X 転送リクエストヘッダーについて説明します。</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://docs.aws.amazon.com/ja_jp/elasticloadbalancing/latest/application/x-forwarded-headers.html#x-forwarded-proto" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">docs.aws.amazon.com</div></div></div></div></a>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Amazon LightsailをAWS CDKで使ってみる</title>
		<link>https://wptech.kiichiro.work/10bwr53umq/</link>
		
		<dc:creator><![CDATA[むらおか]]></dc:creator>
		<pubDate>Fri, 24 Dec 2021 09:37:57 +0000</pubDate>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[AWS]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">http://13.115.157.198/?p=253</guid>

					<description><![CDATA[LightsailがCloudFormationでサポートされ、CDKでも使えるようになったので試してみたことを色々と。 実践 使いたい言語していしてinit→bootstrapをしておく。 CDK v2では、 aws- [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>LightsailがCloudFormationでサポートされ、CDKでも使えるようになったので試してみたことを色々と。</p>



<span id="more-253"></span>



<h1 class="wp-block-heading">実践</h1>



<p>使いたい言語していしてinit→bootstrapをしておく。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ cdk init app --language typescript
$ cdk bootstrap</code></pre></div>



<p>CDK v2では、 aws-cdk-lib 配下に aws-lightsailがいるので、別途パッケージのインストールが不要です。</p>



<p>また、L1ライブラリでのサポートのみになります(v2.2.0)のでCfnのパラメータを愚直に設定するのみになります。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-lang="TypeScript"><code>import {Stack, StackProps} from &#39;aws-cdk-lib&#39;;
import {Construct} from &#39;constructs&#39;;
import {aws_lightsail as lightsail} from &quot;aws-cdk-lib&quot;;

export class WordPressCdkLightsailAlbStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);
    const instance = new lightsail.CfnInstance(this, &#39;WordPressLightsailInstance&#39;, {
      blueprintId: &#39;wordpress&#39;,
      bundleId: &#39;nano_2_0&#39;,
      instanceName: &#39;wordpress-lightsail&#39;,
      availabilityZone: &#39;ap-northeast-1a&#39;,
    });
    new CfnOutput(this, &#39;WordPressLightsailInstanceOutPut&#39;, {
      value: instance.attrPublicIpAddress,
      exportName: &#39;WordPressPublicIpAddress&#39;,
    });
  }
}</code></pre></div>



<p>あとはデプロイのみで終わりです。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ cdk deploy
Outputs:
WordpressCdkLightsailAlbStack.WordPressLightsailInstanceOutPut = xxxxxxxx</code></pre></div>



<p>出力されたPublicIPにアクセスすると、WordPressの画面に遷移します。</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://wptech.kiichiro.work/wp-content/uploads/2021/12/image-15-1024x843.webp" alt=""/></figure>



<h1 class="wp-block-heading">まとめ</h1>



<p>インスタンスのみであれば、わざわざCDKで管理する必要もないのかなという肌感でした。Lightsailだし。<br>手前にLBを立ててACMの証明書を使うのは次回試してみたいです。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【WordPress】ACF10周年とDelicious Brains Inc.による買収を発表</title>
		<link>https://wptech.kiichiro.work/1xbq0pridw/</link>
		
		<dc:creator><![CDATA[むらおか]]></dc:creator>
		<pubDate>Mon, 07 Jun 2021 05:58:14 +0000</pubDate>
				<category><![CDATA[その他]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">http://13.115.157.198/?p=209</guid>

					<description><![CDATA[WordPressのプラグインとして有名なAdvanced Custom Fields (ACF)をDelicious Brains Inc. が獲得した、ということを発表しました。 ACF &#124; 10 Years of  [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>WordPressのプラグインとして有名なAdvanced Custom Fields (ACF)をDelicious Brains Inc. が獲得した、ということを発表しました。</p>




<a rel="noopener" href="https://www.advancedcustomfields.com/blog/10-years-of-acf-a-truly-wonderful-time/" title="ACF | 10 Years of ACF - A truly wonderful time" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://wptech.kiichiro.work/wp-content/uploads/cocoon-resources/blog-card-cache/d5f5ce6707017a50ffcac0ebbf48e04b.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">ACF | 10 Years of ACF - A truly wonderful time</div><div class="blogcard-snippet external-blogcard-snippet">A little over 10 years ago, I uploaded the first version of Advanced Custom Fields to the WordPress.org repo. Little did...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://www.advancedcustomfields.com/blog/10-years-of-acf-a-truly-wonderful-time/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">www.advancedcustomfields.com</div></div></div></div></a>




<a rel="noopener" href="https://deliciousbrains.com/epic-wordpress-announcement/" title="A WordPress Announcement of Epic Proportions" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://wptech.kiichiro.work/wp-content/uploads/cocoon-resources/blog-card-cache/b09cb17b9351edeed3ef93dddd46e6ed.jpeg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">A WordPress Announcement of Epic Proportions</div><div class="blogcard-snippet external-blogcard-snippet">We’ve got some big news to share. If you want to feel the excitement and celebrate with us, you should check out this sp...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://deliciousbrains.com/epic-wordpress-announcement/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">deliciousbrains.com</div></div></div></div></a>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-18" checked><label class="toc-title" for="toc-checkbox-18">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">ACFの機能</a></li><li><a href="#toc2" tabindex="0">機能やライセンスの変更</a></li><li><a href="#toc3" tabindex="0">所感</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">ACFの機能</span></h2>



<p>ACFが提供する主機能は、カスタムフィールドをノーコードで作成ができるというもので、PRO版になると以下の機能が更に追加されます。</p>



<ul class="wp-block-list">
<li>選択できるカスタムフィールドの種類の追加</li>
</ul>



<ul class="wp-block-list">
<li>オプションページの作成</li>



<li>PHPのみでカスタムブロックを作成 (v5.8.0以降)</li>
</ul>



<p>どちらかというと、ブロガーなどの投稿者が利用するというより、WordPressのカスタマイズを行うデベロッパーなどが利用している印象があります。</p>



<p>WordPressの特に管理画面をカスタマイズをするにあたって、ACFの提供する機能は非常に優秀です。</p>



<h2 class="wp-block-heading"><span id="toc2">機能やライセンスの変更</span></h2>



<p>今回の買収によって、気になるのは機能の後方互換とライセンスの価格について変更があるのかどうか、という点ですが、<br>Delicious Brains Inc. の投稿によると、ドラスティックな変更とライセンスの価格の調整は直近では予定されていないとのことです。</p>



<p>また、永久ライセンスは今後も据え置きとのこと。</p>



<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
<blockquote class="twitter-tweet" data-width="550" data-dnt="true"><p lang="en" dir="ltr">TL;DR &#8211; We have committed to honoring ACF lifetime licenses forever.<br><br>Pleas read the full thread 👇</p>&mdash; Brad Touesnard (@bradt) <a href="https://twitter.com/bradt/status/1400488830063501314?ref_src=twsrc%5Etfw">June 3, 2021</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></figure>



<h2 class="wp-block-heading"><span id="toc3">所感</span></h2>



<p>ACFの作者であるElliot Condon氏は、2020年2月にライセンスのプランをサブスクリプションベースに変更するにあたってユーザー数と販売数の齟齬を引き合いに出していました。</p>




<a rel="noopener" href="https://www.advancedcustomfields.com/blog/new-acf-pro-pricing-for-2020/" title="ACF | New ACF PRO Pricing for 2020" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://wptech.kiichiro.work/wp-content/uploads/cocoon-resources/blog-card-cache/eff7c2af236711e0fd7c0a259d2ebac0.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">ACF | New ACF PRO Pricing for 2020</div><div class="blogcard-snippet external-blogcard-snippet">It’s been a while since we last reviewed our pricing. In fact, you could argue we never have! Our premium plugin journey...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://www.advancedcustomfields.com/blog/new-acf-pro-pricing-for-2020/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">www.advancedcustomfields.com</div></div></div></div></a>



<p>既に当時からサービスの規模と保守の負担が個人の許容を超えていたことは示唆されていたため、買収されたことに驚きましたが、今後のACFの開発速度の向上が見込める良いニュースだと思っています。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【WordPress】WordPressでHTTPからHTTPSへ移行する方法 (version5.7以降)</title>
		<link>https://wptech.kiichiro.work/3yjela8tgv/</link>
		
		<dc:creator><![CDATA[むらおか]]></dc:creator>
		<pubDate>Wed, 03 Feb 2021 14:55:57 +0000</pubDate>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">http://13.115.157.198/?p=165</guid>

					<description><![CDATA[ワンクリックでいけるようになるらしい。。 サイトをHTTPからHTTPSへ移行するのは、SSL証明書の取得くらいが面倒なところですし、最近のレンタルサーバー屋さんでは安価で手続きも簡単なので、サーバー側での作業はそれほど [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>ワンクリックでいけるようになるらしい。。</p>



<span id="more-165"></span>



<p>サイトをHTTPからHTTPSへ移行するのは、SSL証明書の取得くらいが面倒なところですし、最近のレンタルサーバー屋さんでは安価で手続きも簡単なので、サーバー側での作業はそれほど手間では無いように思えます。</p>



<p>上記のサーバー作業に加え、WordPressで構築したサイトの場合は以下の2点を実施する必要があります。</p>



<ol class="wp-block-list">
<li>「一般設定 &gt; WordPress アドレス、サイトアドレス」をhttpsに変更する</li>



<li>既に投稿された記事のpost_contentのhttpになっているところをhttpsに修正する</li>
</ol>



<p>以前(~5.6)までは2の作業が面倒で、post_contentの中身を正規表現で抜き出してきて洗い替えをするなどをやっていました。</p>



<p><a rel="noopener" href="https://wordpress.org/news/2021/02/wordpress-5-7-beta-1/" target="_blank">5.7ベータのリリースノート</a>によると、この作業が5.7からは不要になるかもしれないというお話です。</p>



<p>※ 以降は5.7ベータに更新されている前提で進みます。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-20" checked><label class="toc-title" for="toc-checkbox-20">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">サイトヘルスの見た目差分</a></li><li><a href="#toc2" tabindex="0">ボタンクリック時の処理</a></li><li><a href="#toc3" tabindex="0">コンテンツ表示時の処理</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">サイトヘルスの見た目差分</span></h2>



<p>5.2くらいから導入されたサイトヘルスチェック機能ですが、HTTPS接続の有無をテストしています。<br>5.7ではサイトがHTTPS対応していない場合にUpdateボタンが表示されるようになります。</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://wptech.kiichiro.work/wp-content/uploads/2021/02/image-13-1024x294.webp" alt="does not use https"/></figure>



<p>尚、<code>wp-config.php</code> などに <code>WP_HOME</code>を記載している場合は以下のような画面になります。</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://wptech.kiichiro.work/wp-content/uploads/2021/02/image-14-1024x341.webp" alt="when wp_home setting is enabled"/></figure>



<p>Update機能を使いたい場合は定数を削除してくれということみたいです。</p>



<h2 class="wp-block-heading"><span id="toc2">ボタンクリック時の処理</span></h2>



<p>実際にボタンを押下した挙動については、紹介している良記事があったので↓こちらを参考に。</p>




<a rel="noopener" href="https://wptavern.com/wordpress-5-7-will-make-it-easier-to-migrate-from-http-to-https" title="WordPress 5.7 Will Make It Easier to Migrate From HTTP to HTTPS" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Fwptavern.com%2Fwordpress-5-7-will-make-it-easier-to-migrate-from-http-to-https?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">WordPress 5.7 Will Make It Easier to Migrate From HTTP to HTTPS</div><div class="blogcard-snippet external-blogcard-snippet">The next major release of WordPress will make it much easier for users to migrate their sites from HTTP to HTTPS. It int...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://wptavern.com/wordpress-5-7-will-make-it-easier-to-migrate-from-http-to-https" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">wptavern.com</div></div></div></div></a>



<p>ボタン押下時は<code>update_https</code>というアクションを放り込んでいる様子が <code>site-health.php</code>から伺えます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="wp-admin/site-health.php" data-lang="PHP"><code>if ( &#39;update_https&#39; === $action ) {
	check_admin_referer( &#39;wp_update_https&#39; );

	if ( ! current_user_can( &#39;update_https&#39; ) ) {
		wp_die( __( &#39;Sorry, you are not allowed to update this site to HTTPS.&#39; ), 403 );
	}

	if ( ! wp_is_https_supported() ) {
		wp_die( __( &#39;It looks like HTTPS is not supported for your website at this point.&#39; ) );
	}

	$result = wp_update_urls_to_https();

	wp_redirect( add_query_arg( &#39;https_updated&#39;, (int) $result, wp_get_referer() ) );
	exit;
}</code></pre></div>



<p><code>wp_update_urls_to_https</code>自体はhomeとsiteurlのスキーマを変更するのみのようです。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="wp-includes/https-migration.php" data-lang="PHP"><code>/**
 * Update the &#39;home&#39; and &#39;siteurl&#39; option to use the HTTPS variant of their URL.
 *
 * If this update does not result in WordPress recognizing that the site is now using HTTPS (e.g. due to constants
 * overriding the URLs used), the changes will be reverted. In such a case the function will return false.
 *
 * @since 5.7.0
 *
 * @return bool True on success, false on failure.
 */
function wp_update_urls_to_https() {
	// Get current URL options.
	$orig_home    = get_option( &#39;home&#39; );
	$orig_siteurl = get_option( &#39;siteurl&#39; );

	// Get current URL options, replacing HTTP with HTTPS.
	$home    = str_replace( &#39;http://&#39;, &#39;https://&#39;, $orig_home );
	$siteurl = str_replace( &#39;http://&#39;, &#39;https://&#39;, $orig_siteurl );

	// Update the options.
	update_option( &#39;home&#39;, $home );
	update_option( &#39;siteurl&#39;, $siteurl );

	if ( ! wp_is_using_https() ) {
		// If this did not result in the site recognizing HTTPS as being used,
		// revert the change and return false.
		update_option( &#39;home&#39;, $orig_home );
		update_option( &#39;siteurl&#39;, $orig_siteurl );
		return false;
	}

	// Otherwise the URLs were successfully changed to use HTTPS.
	return true;
}</code></pre></div>



<h2 class="wp-block-heading"><span id="toc3">コンテンツ表示時の処理</span></h2>



<p>コンテンツに埋め込まれたHTTPのURLをどこで修正しているかというと、コンテンツの表示時でした。<br><code>the_content</code> に見覚えのないcallbackが追加されています。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="wp-includes/default-filters.php" data-lang="PHP"><code>add_filter( &#39;the_content&#39;, &#39;wp_replace_insecure_home_url&#39; );</code></pre></div>



<p>callbackは↓こちら。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="wp-includes/https-migration.php" data-lang="PHP"><code>/**
 * Replaces insecure HTTP URLs to the site in the given content, if configured to do so.
 *
 * This function replaces all occurrences of the HTTP version of the site&#39;s URL with its HTTPS counterpart, if
 * determined via {@see wp_should_replace_insecure_home_url()}.
 *
 * @since 5.7.0
 *
 * @param string $content Content to replace URLs in.
 * @return string Filtered content.
 */
function wp_replace_insecure_home_url( $content ) {
	if ( ! wp_should_replace_insecure_home_url() ) {
		return $content;
	}

	$https_url = home_url( &#39;&#39;, &#39;https&#39; );
	$http_url  = str_replace( &#39;https://&#39;, &#39;http://&#39;, $https_url );

	// Also replace potentially escaped URL.
	$escaped_https_url = str_replace( &#39;/&#39;, &#39;\/&#39;, $https_url );
	$escaped_http_url  = str_replace( &#39;/&#39;, &#39;\/&#39;, $http_url );

	return str_replace(
		array(
			$http_url,
			$escaped_http_url,
		),
		array(
			$https_url,
			$escaped_https_url,
		),
		$content
	);
}</code></pre></div>



<p>要は、</p>



<ol class="wp-block-list">
<li><code>the_content</code>のタイミングで</li>



<li>post_contentの中身を確認して</li>



<li>スキーマがHTTPになっているサイトアドレスを見つけたら</li>



<li><code>str_replace</code>する</li>
</ol>



<p>ということになってるんですね。</p>



<p>あ、<code>update_post</code>はしないんだ、という安心感。</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
