今回は、Cocoonの記事を読む目安の時間を示してくれる部分のカスタマイズを紹介したい。
文体を変えたり、デザインを変えたりする方法を紹介する。
記事を読む時間機能とは
簡単に説明すると、投稿された記事の文字数から自動的に計算して記事を読み終えるのにかかる時間の目安を算出して表示してくれる機能である。
Cocoonではテーマの設定を変更することで、この機能をプラグイン無しで使うことができる。
なお、Cocoonでは単位が分刻みで最少は1分、最大におそらく制限はない。
記事を読む時間の設定方法
まずは管理者画面に入り、左側サイドバーの「Cocoon 設定」をクリックして、Cocoonの設定画面を開こう。
そして上部のトグルから「本文」をクリックして、投稿・固定記事の本文の設定を変更する画面を開く。
本文の設定画面を一番下までスクロールしていくと「投稿情報表示設定」があるので、その枠の中にある「記事を読む時間」の「記事を読む時間の目安を表示する」にチェックを入れて「変更をまとめて保存」を押して保存する。
こうすることで、このように投稿した記事中に「この記事は約〇分で読めます。」と表示される。
上の画像では1行かつ十数文字しか文章を書いていないので、目安の時間は1分と表示されている。
記事を読む時間のカスタマイズ
それでは、記事を読む時間をカスタマイズする方法を紹介していきたい。
Cocoonのカスタマイズを行う際は、必ず子テーマを使うようにしよう。
文体を変更するカスタマイズ
「この記事は約〇分で読めます。」の部分の文体を変更するカスタマイズ。phpファイルを弄る必要があるのでWebサイトのバックアップは必ず取っておこう。
設定
まずは、自分のPC上にフォルダ名を「tmp」とした空のフォルダを作り、FTPソフトを経由するかサーバーのファイルマネージャーを使って、そのフォルダを「cocoon-child-master」にアップロードしよう（cocoon-child-masterというフォルダはCocoonの子テーマを取り扱っているフォルダである）。
それから、Cocoonの親テーマである「cocoon-master」のtmpフォルダの「content.php」ファイルをコピーして、先ほど子テーマに作成したtmpフォルダにアップロードする。
もしCocoonの親テーマをすでに削除しているなどして自分のPC上に存在しない場合は、もう一度公式サイトからダウンロードしておこう。
子テーマのフォルダにtmpフォルダとcontent.phpファイルが存在することを確認したら、次はWordPressの管理画面の左サイドバーの「外観」にある「テーマエディター」をクリックして「テーマの編集」画面を開こう。
上の画像のように、Cocoonの子テーマが選択されていることを確認しよう。子テーマが選択されているときは、「この子テーマは親テーマ Cocoon のテンプレートを引き継ぎます。」と表示される。
そして、右側のテーマファイルに「tmp ▶」と表記されているフォルダがあるのでそれをクリックしてフォルダを展開し、「content.php」をクリックしてコードの編集画面に入ろう。
上の画像のように、content.phpの編集画面に入ることはできただろうか？
カスタマイズ
それでは、content.phpのコードの中身を見て行こう。PHPコードを下にスクロールして行くと、このようなコードが存在しているはずだ。
<?php if (is_content_read_time_visible() && is_the_page_read_time_visible() && !is_plugin_fourm_page()): ?>
<div class="read-time"><?php echo '<span class="fa fa-hourglass-half" aria-hidden="true"></span>
'.sprintf(__( 'この記事は<span class="bold">約%s分</span>で読めます。', THEME_NAME ), get_time_to_content_read(get_the_content())); ?></div>
<?php endif; ?>これが、記事を読み終えるのにかかる大まかな目安の時間を表示する要素を、投稿記事上に出力して表示するPHPコードになる。
そして、このコードの中の
<span class="fa fa-hourglass-half" aria-hidden="true"></span>という部分が、「この記事は約〇分で読めます。」の左側に表示される「砂が半分流れ落ちた砂時計のアイコン」になる。
また
この記事は<span class="bold">約%s分</span>で読めます。この日本語が混じっている部分が、「この記事は約〇分で読めます。」にあたる。
このふたつを編集することで、記事中に表示される「記事を読む目安の時間」の文体を変更することができる。
それでは、例として上記のコードをこのように書き換えて、ファイルを更新してみよう。もとのコードを消して、このコードをコピペするだけでも構わない。
<?php if (is_content_read_time_visible() && is_the_page_read_time_visible() && !is_plugin_fourm_page()): ?>
<div class="read-time"><div class="mycus-read-time-in"><?php echo '<span class="fa" aria-hidden="true">'.sprintf(__( '読了目安：<span class="bold">約%s分</span>', THEME_NAME ), get_time_to_content_read(get_the_content())); ?></div></div>
<?php endif; ?>本文上での表示
先ほどのようにコードを書き換えると、本文上ではこのように表示される。
砂時計のアイコンは下記のコードのように、span内にFont AwesomeのHTMLコードを直接書くことで出力するようになっている。
<span class="fa fa-hourglass-half" aria-hidden="true"></span>つまり、この部分を別のHTMLコードに書き換えて、違うアイコンを出力することもできるのだ。
例えば、下のように「本を開いてるアイコン」のHTMLコードに書き換えてからファイルを更新すると
<span class="fa fa-book-open" aria-hidden="true"></span>本文中ではこのように表示される。
自分のWebサイトに合ったアイコンをFont Awsomeの公式サイトで探してみるのもいいかもしれない。
外観のカスタマイズ
文体を変更したので、次は「記事を読む時間」全体のデザインのカスタマイズを行ってみよう。
設定
先ほどと同じく「テーマの編集」画面に入り、右側のテーマファイルバーの中に存在する「スタイルシート (style.css)」をクリックして子テーマのstyle.cssを開こう。
上の図のように、子テーマのstyle.cssを開くことができただろうか？
それでは、子テーマのstyle.cssにCSSコードを記入していこう。そのさい、「ファイルを更新」ボタンを押して保存しないとカスタマイズが反映されないので注意。
カスタマイズ例：シンプル
楕円形のシンプルなデザイン。デフォルトのデザインよりも目立たせたくなかったら。
/*記事を読む時間のカスタマイズ*/
/*ここから*/
.read-time {
border: 0;
}
.mycus-read-time-in {
display: inline-block;
padding: 3px 10px 2px 11px;
background-color: #6F786C;
color: #fff;
border-radius: 20px;
}
/*ここまで*/外観はこのようになる。
ジャンル問わずほとんどのWebサイトに合うデザインとなった。いかにもCocoonという感じを無くして、他のCocoonを使っているブログとデザインの差別化を図りたい人にはいいかもしれない。
カスタマイズ例：鍋蓋風
鍋蓋のようなデザイン。デフォルトのデザインを少しカスタマイズした形になる。
/*記事を読む時間のカスタマイズ*/
/*ここから*/
.read-time {
position: relative;
border: 0;
border-bottom: 3px solid rgba(9, 124, 122, 0.8);
}
.mycus-read-time-in {
display: inline-block;
padding: 5px 10px 2px;
background-color: rgba(9, 124, 122, 0.8);
border-radius: 5px 5px 0 0;
color: #fff;
}
/*ここまで*/外観はこのような感じになる。
形状的に、お料理系のブログに合うかもしれない。また、色を変えるとタクシーのトップサインのようにも見えるので、交通系のWebサイトにも合うかも。
カスタマイズ例：巻物風
巻物のようなデザイン。古風な感じでけっこう目立ってくれる。
/*記事を読む時間のカスタマイズ*/
/*ここから*/
.read-time {
position: relative;
border: 0;
}
.mycus-read-time-in {
position: relative;
display: inline-block;
padding: 2px 15px 1px;
background-color: #7586E6;
color: #fff;
border: 5px solid #4B63E9;
border-top: 0;
border-bottom: 0;
}
.mycus-read-time-in::before, .mycus-read-time-in::after {
content: "";
position: absolute;
top: 5px;
width: 5px;
height: 15px;
background-color: #333;
}
.mycus-read-time-in::before {
left: -10px;
}
.mycus-read-time-in::after {
right: -10px;
}
@media screen and (max-width: 480px) {
.mycus-read-time-in::before, .mycus-read-time-in::after {
top: 4px;
}
}
/*ここまで*/外観はこのようになる。
歴史系だったり郷土資料のブログによく合うかもしれない。または忍者村や書道のブログなどにも。
カスタマイズ例：リボン風
両端を折り曲げたリボンのようなカスタマイズ。疑似要素をフルに使う。
/*記事を読む時間のカスタマイズ*/
/*ここから*/
.read-time {
border: 0;
margin-bottom: 3em;
}
.mycus-read-time-in {
position: relative;
display: inline-block;
padding: 2px 15px 1px;
background-color: #EC4747;
color: #fff;
border: 2px solid #892525;
}
.mycus-read-time-in::before, .mycus-read-time-in::after, .mycus-read-time-in .fa::before, .mycus-read-time-in .fa::after, .mycus-read-time-in .bold::before, .mycus-read-time-in .bold::after {
content: "";
position: absolute;
}
.mycus-read-time-in .bold::before, .mycus-read-time-in .bold::after {
top: 27px;
border-top: 5px solid #A41F1F;
border-bottom: 5px solid #EC4747;
}
.mycus-read-time-in::before, .mycus-read-time-in .fa::before, .mycus-read-time-in::after, .mycus-read-time-in .fa::after {
top: 12px;
}
.mycus-read-time-in .fa::before, .mycus-read-time-in .fa::after {
width: 10px;
height: 25px;
background-color: #EC4747;
}
.mycus-read-time-in::before, .mycus-read-time-in::after {
border: 12.5px solid #EC4747;
}
.mycus-read-time-in .bold::before {
left: -2px;
border-left: 10px solid #EC4747;
border-right: 10px solid #A41F1F;
}
.mycus-read-time-in .fa::before {
left: -12px;
}
.mycus-read-time-in::before {
left: -37px;
border-left-color: transparent;
}
.mycus-read-time-in .bold::after {
right: -2px;
border-left: 10px solid #A41F1F;
border-right: 10px solid #EC4747;
}
.mycus-read-time-in .fa::after {
right: -12px;
}
.mycus-read-time-in::after {
right: -37px;
border-right-color: transparent;
}
@media screen and (max-width: 480px) {
.mycus-read-time-in .bold::before, .mycus-read-time-in .bold::after {
top: 25px;
}
.mycus-read-time-in::before, .mycus-read-time-in .fa::before, .mycus-read-time-in::after, .mycus-read-time-in .fa::after {
top: 10px;
}
}
/*ここまで*/外観はこのようになる。
ギフトであったり、何かの販促やプレゼントが主体のWebサイトに使えるかもしれない。また、SSだったり小説だったりを執筆しているWebサイトにもいいだろう。
まだまだデザインのカスタマイズ案は浮かぶが、ひとまずこれくらいにしておく。リボンのカスタマイズのCSSコードを応用出来たら、あなたも一通りのカスタマイズが組めるはずだ。
カスタマイズの注意点
私が上のほうで解説した記事を読む時間のデザインのカスタマイズ案は、本来Cocoonの記事を読む時間のPHPコードには存在していない「mycus-read-time-in」という私が付け加えた要素を使っている。また今回紹介したカスタマイズではアイコンも表示させておらず、文体も大幅に変えている。
そのため、CSSコードだけをコピペするとデザインが崩れてしまう人もいるかもしれない。
なので、「文体を変更するカスタマイズ」の項もよく読み、カスタマイズする際に疑似要素だったりborderやpaddingなどを使う場合は、自分でCSSコードを調節してみてほしい。
最後に
Cocoonは時折アップデートしている。そのため、親テーマが新しいバージョンなのにカスタマイズを施した子テーマのPHPファイルが古いと場合によってはエラーが起きてしまったり、バージョンが上がったことで追加された機能が使えない場合も出てくる。
「記事を読む時間」のPHPコードがガラリと変更されることはないかもしれないが、いちおう注意しておいてほしい。
私は記事を読む時間を設定していない。理由は、特につける必要もないと思っているからだ。
ただ、多くのCocoonを使っている人はこの機能を設定していると思う。また、自分も使う機会があるかもしれないので、今回のカスタマイズを忘備録的に記事にしておいた。一度やってみたことを書き留めず忘れてしまって、また必要になったことを一から思い出しながらやるのは非効率的なので。
それでは、また。この記事が役に立つと嬉しい。