うまくいかなかったこと

最近、うまくいかなかったことを共有します。

圧倒的に経験が不足しているので、うまくいかない原因が分からないこともしばしば。

ああでもないこうでもないとトライ＆エラーを繰り返しながら少しずつ解決に近づいていきます。

このようにブログにすると、記憶に定着させることができるので、おすすめです。

画像が表示されないのはMixed Contentが原因かも

最初のHTMLがセキュリティで保護されているHTTPS 接続を介して読み込まれていても、他のリソース（画像、動画、スタイルシート、スクリプトなど）がセキュリティで保護されていないHTTP 接続を介して読み込まれる場合に起こります。
混合コンテンツとは何ですか？

開発者ツールで要素を選択してからコンソールを開くとエラーが出ているはずなので、表示されないリソースがあるときは、確認してみてください。

画像とページのプロトコルの確認は必須と肝に銘じました。

Chromeの設定に［常に安全な接続を使用する］というものがあり、すべてのサイトの読み込みにHTTPSを優先して使用するよう設定できるので、これについても注意が必要だなと思いました。

というのも、サイトをSSL化していなくても、サーバーでSSL設定をしていると、HTTPSが優先されてしまう可能性があるからです。

SSL化していないクライアントのサイトを自分のサーバーでテストするときは、気を付けてください。

Lightningのtitleが書き換わらないときはフックの優先順位とVK All in One Expansion Unitを見直そう

Lightningを使用している場合、title要素を変更できない原因は２つ考えられます。

１つは、フックを実行するときの優先順位です。

他のテーマでは書き換わるのに、Lightningだとダメだったので、検索ワードにLightningを追加。そうして見つけたのがVektor Trainingのページです。

Lightning の 404ページの見出し・パンくずを書き換える・コンテンツエリア上下の余白を無くす | ベクトレ

優先順位を12に変えたらできました！！

もう１つの原因は、VK All in One Expansion Unitです。

［ExUnit］＞［有効化設定］を開くと［タイトルタグの書き換え］というオプションがあるので、これをオフにします。

このオプションは、head titleタグ内へ出力される内容をVK EX Unit のルールで出力します。（VK EX Unit 側で wp_title() をフィルターフックでカスタマイズ）使用中のテーマやプラグインでtitleタグの内容を出力する場合はチェックを外して下さい。

このことから学んだのは、次の３つです。

他のテーマで試してみる
実行するときの優先順位を変えてみる
プラグインが関係している可能性もある

サイトにログインできなくなるのはDBにコードが残ってしまうからだった

久しぶりにやってしまいました。

titleが書き換わらなので、自暴自棄になって、てきとうな関数を打ち込んで保存した結果がこれです。

Code Snippetsを使ってPHPコードを書いていたので、プラグインを削除すれば大丈夫と思っていたのですが、再インストールして有効化したら、またログインできなくなり、焦りました。

調べたところ、プラグインを削除してもDBにコードが残っているということが分かりました。

Code Snippetsを使うときは、［フロントエンドのみで実行］を選択して保存するようにしようと、猛省しました。

面倒ごとは、なるべく避けたいですから・・・

DBつながりで、思い出したことがあります。

WordPressをアンインストールしたときにDBも削除していますか？

フォルダと.htaccessファイルも残ってしまうので、削除しましょう。

おまけ

これらのトラブルは、ブラウザーのタブに表示されるファビコンとタイトルを特定のページでのみ書き換えたくて試行錯誤しているときに起きたものです。

せっかくなので完成したコードを共有します。

ページ指定

特定のページにのみコードを実行したいときは、is_page()を使います。

この関数のパラメーターは、チェック対象のページ ID、タイトル、スラッグ、またはそれらの配列です。

複数のページを指定するときは配列にします。これ大事なポイントです。

ページIDはどのページなのか分かり難いので、私はスラッグを使います。

if( is_page( array( 'slug1', 'slug2', 'slug3' ) ) ) {
    // これら３つのページで実行するコード
}

ファビコン／サイトアイコンの書き換え

［外観］＞［カスタマイズ］からサイトアイコンを設定すると、４つの異なるサイズの画像が自動生成されます。

すでに設定されているサイトアイコンは変更したくないので、自分でサイズ違いの画像を作成してアップロードします。

画像形式はPNGで、画像サイズは32x32px、180x180px、192x192px、270x270pxの４つです。

関数を使って画像のURLを取得することも可能ですが、ベタ打ちでも問題ないです。

wp_upload_dir()は、現在のアップロードディレクトリのパスとURLを含む配列を返します。

［設定］＞［メディア］の［アップロードしたファイルを年月ベースのフォルダーに整理］というオプションががオンになっていると、サブディレクトリ（年／月フォルダ）が「現在」の値になるので注意しましょう。年や月が変わると、アップロードした画像が見つからないなんてことになってしまいます。

また、アップロードした画像のURLを必ず確認しましょう。画像ファイル名が書き換わることがあります。

ファビコンの書き換えは、site_icon_meta_tagsを使います。

$meta_tagsはサイトアイコンのメタタグの配列なので、一つずつ書き換えていきます。

最後に$meta_tagsを返すことをお忘れなく。

add_filter( 'site_icon_meta_tags', function( $meta_tags ){
	if( is_page( array( 'slug1', 'slug2', 'slug3' ) ) ) {
		$upload_dir = wp_upload_dir();
		$upload_base_url = $upload_dir['baseurl'];
		$upload_sub_dir = '/2023/02/';
		$favicon_base_url = $upload_base_url . $upload_sub_dir;
		$meta_tags[0] = sprintf( '<link rel="icon" href="%s" sizes="32x32" />', esc_url( $favicon_base_url.'favicon-32x32.png' ) );
		$meta_tags[1] = sprintf( '<link rel="icon" href="%s" sizes="192x192" />', esc_url( $favicon_base_url.'favicon-192x192.png' ) );
		$meta_tags[2] = sprintf( '<link rel="apple-touch-icon" href="%s" />', esc_url( $favicon_base_url.'favicon-180x180.png' ) );
		$meta_tags[3] = sprintf( '<meta name="msapplication-TileImage" content="%s" />', esc_url( $favicon_base_url.'favicon-270x270.png' ) );		
	}
	return $meta_tags;
} );

タイトルの書き換え

pre_get_document_titleの他に、区切り記号を変更するdocument_title_separatorや、タイトルの一部を変更するdocument_title_partsもあります。

サイトのタイトルだけを書き換えたい場合は、次のように書きます。

add_filter( 'document_title_parts', function( $title ) {
	if( is_page( array( 'slug1', 'slug2', 'slug3' ) ) ) {
		$title['title'] = 'abc';
	}
	return $title;
});

まとめ

うまくいかないと、想定以上の時間を費やすことになりますが、完成したときの達成感は格別です。

この記事が、みなさまの問題解決に少しでもお役に立てれば幸いです。