【WordPress】yStandardカスタマイズ、SNSボタンの下に関連コンテンツを配置する

2020年1月18日

今回は、関連コンテンツをSNSボタンの下に配置するカスタマイズ例を紹介したいと思います。
使用テーマはyStandardです。

記事下の関連コンテンツ

ウィジェットの記事下エリアやカスタマイズの記事下に関連コンテンツを配置した場合、このようにSNSボタンの上に表示されます。
SNSでのシェアの前に見てもらいたい場合は、この位置になると思います。

SNSボタンの下に関連コンテンツ

今回紹介するカスタマイズでは、このようにSNSボタンの下に関連コンテンツを配置します。yStandardの関連記事の代わりに関連コンテンツを表示させたい場合に有効ですね。

親テーマからファイルをコピー

このカスタマイズでは子テーマを使います。また、FileZillaなどのFTPソフトやレンタルサーバーでのファイルマネージャーなどの操作が必要になります。子テーマの導入やFTPソフトのインストールは前もって環境を整えておいてください。

【WordPress】yStandardカスタマイズ、子テーマの使い方
今回は、子テーマを使ったカスタマイズについて紹介したいと思います。使用テーマはyStandardです。 [adsense] 子テーマの使い方 子テーマって? 子…
seguimiii.com

ここではFileZillaを使用して説明します。
目指すファイルはystandard(親テーマの方)にあるfooter-parts.phpです。

[ystandard]→[template-parts]→[singular]→footer-parts.php

このfooter-parts.phpをPCにコピーして編集します。

関連コンテンツのコードを挿入

?>
<?php if ( is_single() ): ?>
ここに関連コンテンツのコード
<?php endif; ?>
<?php

footer-parts.phpをテキストエディタで開きます。
関連記事の代わりにするということで、関連記事の下に必要なコードを足していきます。カテゴリーやタグよりも上にしたい場合は、SNSシェアボタンの記述のすぐ下に挿入してください。

赤枠で囲まれた部分が今回挿入した部分です。
まず、関連記事の終わりで一度phpを閉じます。?>の部分です。

続いて<?php if ( is_single(): ) ?>ここに関連コンテンツのコード<?php endif; ?>の部分。これは投稿ページのみで表示させるものです。プライバシーポリシーやお問い合わせなど、固定ページでは表示しないようにします。
ここに関連コンテンツのコードの部分を自身のコードに置き換えてください。

そして<?phpで再開。こんな感じになっています。

上書きして保存。

子テーマにアップロード

関連コンテンツのコードを書き足したfooter-parts.phpファイルを子テーマにアップロードします。

ここでのポイントは、親テーマと同じようにフォルダの階層を維持するということです。
ystandard-childに単に入れるのではなく、[template-parts]→[singular]→footer-parts.phpとフォルダを作成して親テーマと構成を一致させます。

子テーマにアップロードできていれば、カスタマイズのテーマエディターにて子テーマにtemplate-partsが追加されているのが確認できます。

親テーマではアップデートの度に追加部分が消えてしまいますし、一文字違うだけでもサイトの運営に支障をきたすエラーが発生します。その点子テーマなら、アップデートの度に消えることもありませんし、親テーマが無事なら子テーマの部分を削除するだけでデフォルトに戻せるので安心です。

最後にちゃんと関連コンテンツがSNSボタンの下に配置されているか確認して完了です。
関連コンテンツのコードを取得したてだとすぐに表示されない場合があるので、そのときはちょっと時間をあけて確認します。

関連記事を表示させている場合は、カスタマイズの投稿ページ設定にある「記事下に関連記事を表示する」のチェックを外します。

いかがだったでしょうか。
独学でのカスタマイズなのでもっといい方法があるかもしれませんが、参考になればと思います。