cocoonカスタマイズ：wordpress記事一覧の概要部分で読者の行動を促す

はじめに
「Advanced Custom Fields」をインストール
カスタムフィールドの設定
エントリー表示部分を編集・調整
テーマ「cocoon」の場合：「entry-card.php」を編集する
CSSでデザイン編集・調整
まとめ
こんなのもやってます

はじめに

「一覧表示に表示される概要に統一感がないなあ」と思ったことありませんか？他の人のブログのトップページをざっと眺めて見ても「あんまり読みたいと思わないなあ」と思ったことないですか？

端的に言えば、右のような表示の方が見やすくないですか？

ということで、この記事では、記事一覧表示をカスタマイズすることによって、以下のような変化を起こすことができるように解説しています！

👦誰向けの情報かわかりやすくなる
💡どのような変化があるか明確になる
✏️執筆時にも軸がブレなくなる

「Advanced Custom Fields」をインストール

① wordpressダッシュボードから「プラグイン＞新規追加」を選択

まずは、「Advanced Custom Fields」をインストールしましょう。
プラグインをwordpress上で検索して追加します。

ダッシュボードの左メニューにある「プラグイン＞新規追加」をクリックして下さい。

すると右上あたりに検索フォームがあるので、そこに「Advanced Custom Fields」とガシャガシャ打ち込んで、ターーン！っと検索しましょう。

プラグイン「Advanced Custom Fields」

すると、こんな感じのが結果として現れるはずです。

似たような名前のプラグインが色々と出てくると思いますが、それらは「Advanced Custom Fields」本体をインストールしてから、追加でインストールするためのアドオンなので、今は気にしないでおいてください。

インストールしたら、ちゃんと「有効化」しましょうね。

カスタムフィールドの設定

さて、無事にインストールが終わったところで、早速カスタムフィールドの設定です。

カスタムフィールドはHTMLで言えばFORMタグで生成したフォームのようなものだと思ってもらえばいいかなと。厳密に言えばMySQLのデータベースに準拠しているはずなので、使えるフィールドタイプはテキストやチェックボタンなどの他にも数値など色々あります。使いこなせると便利なので、応用したい方は勉強してみてくださいね。

フィールドタイプについては、今回はシンプルに「テキスト」と「Wysiwygエディタ」だけ使いましょう。

僕が設定したのは以下の３つです。

対象：読者として想定する対象者。
方法：オススメしたい方法、メソッド、ノウハウ。
未来：それによって得られる未来、変化。

僕の場合ですが、ブログ記事を書くときに、読者の「行動」を促したいという目標があって書いています（できているかどうかは別として）。なので、誰に向けて書いているのか（読者）、その人にどのような行動を促したいのか（方法）、それによってその人はどうなるのか（未来）ということを見える化するための型として利用している感じです。

画像をみていただければ、各項目の説明はわかると思いますが、一応おさらいというか補足。

フィールドラベル：記事の本文を打ち込む画面で表示されるので、自分にわかるような名前をつけておくと良い。
フィールド名：半角英数で設定。あとでphp編集する際に必要となる。自分用ではなくコンピューター用につけてあげる名前。
フィールドタイプ：先ほど触れたように、テキスト以外にも色々あるよ。
フィールド向けヒント：人は忘れる生き物なので、３ヵ月後の自分のために記述ルールなどをメモしておくといい。
必須か？：気合い入れて「はい」にしたいところだけど、型にはまらないものも出てくるはずなので、「いいえ」にしておきましょう。

エントリー表示部分を編集・調整

さて、ここが一番の難点かもしれません。

現在僕が使用しているwordpressテーマ「cocoon」を例にして説明します。

他のテーマについても、わかり次第追記していこうかなと思いますが…予定は未定です。

FTPソフトでお使いのサーバーの「wp-content/themes/cocoon-master/tmp」フォルダに接続しましょう。
「entry-card.php」をダウンロードして編集ソフトで開きます。
「get_the_snipet( get_the_content(), get_entry_card_excerpt_max_length() ); //カスタマイズで指定した文字の長さだけ本文抜粋?>」という行を探します。
ここを書き換えます。
「wp-content/themes/cocoon-child-master/tmp」フォルダにアップロードします。
おしまい！！

つきのひと

いかがでしたか？

…って、いやいや、怖いですよね。肝心な部分が「書き換えます」しか言ってないし。

ということで、以下、詳しくみていきましょう。

テーマ「cocoon」の場合：「entry-card.php」を編集する

「entry-card.php」ファイルを開くとこんな感じのコードが書かれています。

<a href="<?php the_permalink(); ?>" class="entry-card-wrap a-wrap cf" title="<?php the_title() ?>">
  <article id="post-<?php the_ID(); ?>" class="post-<?php the_ID(); ?> entry-card e-card cf">
    <figure class="entry-card-thumb card-thumb">
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき?>
        <?php the_post_thumbnail('thumb320' , array('class' => 'entry-card-thumb-image card-thumb-image', 'alt' => '') ); ?>
      <?php else: // サムネイルを持っていないとき ?>
        <img src="<?php echo get_template_directory_uri(); ?>/images/no-image-320.png" alt="NO IMAGE" class="entry-card-thumb-image no-image list-no-image" />
      <?php endif; ?>
      <?php the_nolink_category(); //カテゴリラベルの取得 ?>
    </figure><!-- /.entry-card-thumb -->

    <div class="entry-card-content card-content">
      <h2 class="entry-card-title card-title" itemprop="headline"><?php the_title() ?></h2>
      <div class="entry-card-snippet card-snippet">
        <?php echo get_the_snipet( get_the_content(), get_entry_card_excerpt_max_length() ); //カスタマイズで指定した文字の長さだけ本文抜粋?>
      </div>
      <div class="entry-card-meta card-meta">
        <div class="entry-card-day"><span class="post-date"><?php the_time('Y.m.d'); ?></span></div>
        <div class="entry-card-categorys"><?php the_nolink_categories() ?></div>
      </div>
    </div><!-- /.entry-card-content -->
  </article>
</a>

端的に言えば、黄色いマーカーで示した部分を書き換えてやればOK。

注意！！編集したものを、絶対に元々あった「wp-content/themes/cocoon-master/tmp」フォルダにアップロードしないでくださいね。失敗したら大切なサイトが心の綺麗な人にしか見えないやつ（全ページ真っ白）になってしまいます！

黄色いマーカーで示した３行を、以下のコードに置き換えてください。

マーカーの前後はそのままで、いじらないでください。

	<?php if(get_field('reader')&&get_field('method')&&get_field('for_what')): ?>
		<div class="card_disp_field">
			<div>
				<?php $txt = get_field('reader'); ?>
				<?php if($txt): ?>
					<div class="float_left"><b>行動</b></div>
					<span class="reader"><?php echo $txt; ?></span>が、
				<?php endif ?>

				<?php $txt = get_field('method'); ?>
				<?php if($txt): ?>
					<span class="method"><?php echo $txt; ?></span>。
				<?php endif ?>
			</div>
			<div>
				<?php $txt = get_field('for_what'); ?>
				<?php if($txt): ?>
				<div class="float_left clear_both"><b>変化</b></div>	
				<span class="for_what"><?php echo $txt; ?></span>
				<?php endif ?>
			</div>
		</div>
	<?php else: ?>
		<div class="entry-card-snippet card-snippet">
			<?php echo get_the_snipet( get_the_content(), get_entry_card_excerpt_max_length() ); //カスタマイズで指定した文字の長さだけ本文抜粋?>
		</div>
	<?php endif ?>

間違えないように注意しながらコピペしてください。

さらに、間違えないように注意して欲しいので、３回書きます。

「wp-content/themes/cocoon-child-master/tmp」フォルダにアップロードします。

「/cocoon-child-master/tmp」フォルダですからね。

子テーマのフォルダに「tmp」フォルダがなければ、FTPソフトでフォルダ作成してくださいね。

大事なことなので、もう一度いいます。編集したものを、絶対に元々あった親テーマの「wp-content/themes/cocoon-master/tmp」フォルダにアップロードしないでくださいね。失敗したら大切なサイトが心の綺麗な人にしか見えないやつ（全ページ真っ白）になってしまいます！

上の編集・アップロードがうまくいって入れば、「読者」「方法」「未来」の項目に入力している記事は表示が変わっているはずです。

逆にいうと、「読者」「方法」「未来」の三つが揃っていないといつも通りの概要が表示されるように条件分岐してあります。

CSSでデザイン編集・調整

さて、デザイン部分もいじらないとちょっとかっこ悪いので、僕の場合のCSSも掲示しておきたいと思います。

これをそのまま設定すると、画像右側のような表示になると思います。

//汎用書式
.clear_both {
    clear: both;
}
.float_left {
    float: left;
    margin-right: 10px;
}
//カスタムフィールド表示枠設定
.card_disp_field {
    border: 3px dashed #fff0f0;
    border-radius: 10px;
    padding: 5px;
    margin: 0 10px;
}
//「読者」項目表示デザイン
span.reader {
    background: linear-gradient(transparent 60%, #ffff66 60%);
}
//「方法」項目表示デザイン
span.method {
    background: linear-gradient(transparent 90%, lightgreen 60%);
}
//「未来」項目表示デザイン
.for_what li {
    margin-left: 60px;
    font-size: 13pt;
}

細かい部分はお好みでいじってくださいね。