Cocoonで抜粋をリッチテキストにしてみたら・・・（改訂版）

テーマをCocoonにしてみたのだ。
有料のWordPressテーマも数多くある中、このCocoonは無料で利用できるのにもかかわらず、かなり相当すごく高機能なのだ。しかもスキンを入れ替えるとガラッと見た目が変わる。

最近、仕事でもWordPressを触ることが増えたのでこのブログも色々とチャレンジしてみようかな、、、などと思うところがあって、Dockerで開発環境を作って色々試しつつ、この本番サイトに適用していこうと思ってるのだ。世間ではWeb3.0とか言われてるのでもうブログなんてレガシーメディアかもしれないけどね。

で、
WordPressの抜粋をリッチテキストにしてみたら、Cocoonだと一覧系の画面の表示がおかしくなってしまうのだ。
こんな感じ。

ちなみに抜粋をリッチテキストにするのに参考にしたのはこちら。

このスクリーンショットのようにアイキャッチ画像とタイトルや抜粋の配置が横並びじゃなくて、縦位置がずれたような感じにおかしくなっちゃうので、Cocconをカスタマイズしないといけないみたいなのだ。しかもカスタマイズしたいファイルは lib ディレクトリにある。
lib ディレクトリのファイルをカスタマイズしたい場合のやり方は先人がCocoonフォーラムで質問してるのでその回答に倣ってカスタマイズするのだ。

カスタマイズ方法は以下の通り。sshとかでサーバーに接続してる前提で。

# WordPressのディレクトリに移動
# （このパスとは限らないので気を付けてな。特にレンタルサーバーだとここには入れないと思う。）
cd /var/www/html/
# カスタマイズしたいPHPの関数が書かれてるファイルを開く
vi -R wp-content/themes/cocoon-master/lib/seo.php

viエディタが読み取り専用で開いたら（もちろん他のエディタでも良いわけだけど）「function get_the_snippet」を検索。

//本文抜粋を取得する関数
if ( !function_exists( 'get_the_snippet' ) ):
function get_the_snippet($content, $length = 70) {
  global $post;

  //抜粋（投稿編集画面）の取得
  $description = $post->post_excerpt;

  /* 中略 */

  return apply_filters( 'get_the_snippet', $description, $post );
}
endif;

長いので途中は省略してあるけど、大体こんな感じになってるので、

function get_the_snippet($content, $length = 70) {

の行から、半角スペースがなく

だけの行まで（要はget_the_snippet関数全体）をテキストエディタとかにコピー。
viエディタを終わらせたら、こんどは子テーマ側の関数を定義しているfunctions.phpファイルを開く。

# 子テーマのfunctions.phpを開く
vi wp-content/themes/cocoon-child-master/functions.php

viエディタが開いたらファイルの末尾まで移動してこんな感じのコメントを書いてから・・・、

//本文抜粋を取得する関数（親テーマの関数を上書きする）

テキストエディタにコピーしておいた内容をペースト。

function get_the_snippet($content, $length = 70) {
  global $post;

  //抜粋（投稿編集画面）の取得
  $description = $post->post_excerpt;

  /* 中略 */

  return apply_filters( 'get_the_snippet', $description, $post );
}

その後、抜粋のHTMLタグを除去するようにカスタマイズするので、【ここが一番重要】

  //抜粋（投稿編集画面）の取得
  $description = $post->post_excerpt;

のところを次のように変更。

  //抜粋（投稿編集画面）の取得
  $description = strip_tags($post->post_excerpt);

そしてviエディタを上書き保存すればOK。
この方法ならCocoonの親テーマがバージョンアップても消えないので大丈夫。（もし子テーマがバージョンアップすることがあったら消えちゃうけどね。）