【WordPress】アイキャッチを記事タイトル下に自動表示、さらにバイラル風に表示する方法

wordpress-viral-style-eyecatch

[目的]SANGO+PORIPUでバイラル風アイキャッチにしたい

テーマをSANGO+PORIPUに変えたので、将来を見据えてバイラル風アイキャッチに変更してみたいと思い、検証してみました。

https://oldno07.com/poripu/eyecatch-viral/

[問題]いままのでアイキャッチは手動で設定していた

以前は、はてなブログで投稿していたので、現在も手動で冒頭に画像を添付してそこからアイキャッチを設定しています。

この状態だと記事タイトル下の自動表示にした時に問題が発生します。

アイキャッチの記事タイトル下の自動表示

はてなブログからWordpress以降後、デフォルトの状態だとアイキャッチ、1画像目とアイキャッチが2連続で表示されます。

ですので、カスタマイズ>詳細>記事のタイトル下にアイキャッチを表示しないにチェックを入れてました。

ブログ記事の1画像目を非表示にする方法

まず画像のパスははてなブログとwordpressが入り混じって、Search Regexなどで置換は難しい状況です。

ですので、functions.phpを使って、1画像目を非表示にします。

Code Snippetsの導入

functions.phpにコードを追加するので、リスクヘッジのためにCode Snippetsのプラグインを導入します。

入れ方は下記のサイトが参考になります。

https://netaone.com/wp/code-snippets/

1画像目を非表示にするコード

Snippets>Add Newから下記のコードを挿入します。

function remove_first_image ($content) {
if (!is_page() && !is_feed() && !is_home()){
$content = preg_replace("/<img[^>]+\>/i", "", $content, 1);
} return $content;
}
add_filter('the_content', 'remove_first_image');

以上で、全ての1画像目が非表示になります。

元に戻したい時はこのコードをOFFにすればOKです。Snippetsで安全安心に変更できます!

バイラル風アイキャッチの設定方法

まずアイキャッチが全く表示されてない状態になっているので

カスタマイズ>詳細>記事のタイトル下にアイキャッチを表示しないにチェックします。

あとはPORIPUのテーマを有効化している状態であれば、投稿編集から投稿属性>テンプレート>バイラル風アイキャッチを選択します。

以上で、バイラル風アイキャッチの表示になります。

まとめてテンプレートを変更する方法

ひとつひとつテンプレートの変更は面倒なので、カスタマイズします。

絞り込み検索にテンプレートで検索する項目を追加

Snippetsに下記のコードを追加します。これでテンプレートのソートができます。

https://qiita.com/ohuron/items/e29ace717acf41e346ef

一括テンプレート変更

  1. 投稿一覧画面から、変更したい記事をまとめて選択

  2. 編集>適用を押して、一括編集メニューがでたらテンプレートをバイラル風アイキャッチにします。

以上です。

まとめ

SANGOの適切なアイキャッチサイズは680px×390pxだそうなのでこれも考慮しバイラル風アイキャッチにできないか、今後検討したいと思います。

https://yuyafreedom.com/sangononoeyecatching/