Cocoonの記事を読む時間のカスタマイズ

Cocoon

今回は、Cocoonの記事を読む目安の時間を示してくれる部分のカスタマイズを紹介したい。

文体を変えたり、デザインを変えたりする方法を紹介する。

記事を読む時間機能とは

簡単に説明すると、投稿された記事の文字数から自動的に計算して記事を読み終えるのにかかる時間の目安を算出して表示してくれる機能である。

Cocoonではテーマの設定を変更することで、この機能をプラグイン無しで使うことができる

なお、Cocoonでは単位が分刻みで最少は1分、最大におそらく制限はない。

記事を読む時間の設定方法

まずは管理者画面に入り、左側サイドバーの「Cocoon 設定」をクリックして、Cocoonの設定画面を開こう。

そして上部のトグルから「本文」をクリックして、投稿・固定記事の本文の設定を変更する画面を開く。

本文の設定画面を一番下までスクロールしていくと「投稿情報表示設定」があるので、その枠の中にある「記事を読む時間」の「記事を読む時間の目安を表示する」にチェックを入れて「変更をまとめて保存」を押して保存する。

こうすることで、このように投稿した記事中に「この記事は約〇分で読めます。」と表示される。

上の画像では1行かつ十数文字しか文章を書いていないので、目安の時間は1分と表示されている。

記事を読む時間のカスタマイズ

それでは、記事を読む時間をカスタマイズする方法を紹介していきたい。

Cocoonのカスタマイズを行う際は、必ず子テーマを使うようにしよう。

文体を変更するカスタマイズ

「この記事は約〇分で読めます。」の部分の文体を変更するカスタマイズ。phpファイルを弄る必要があるのでWebサイトのバックアップは必ず取っておこう。

設定

まずは、自分のPC上にフォルダ名を「tmp」とした空のフォルダを作り、FTPソフトを経由するかサーバーのファイルマネージャーを使って、そのフォルダを「cocoon-child-master」にアップロードしよう(cocoon-child-masterというフォルダはCocoonの子テーマを取り扱っているフォルダである)。

Cocoonの子テーマのフォルダの場所は、通常「public_html/あなたのドメイン名/wp-content/themes/cocoon-child-master」に存在する。

これを、「public_html/あなたのドメイン名/wp-content/themes/cocoon-child-master/tmp」となるようにアップロードしよう。

それから、Cocoonの親テーマである「cocoon-master」のtmpフォルダの「content.php」ファイルをコピーして、先ほど子テーマに作成したtmpフォルダにアップロードする

もしCocoonの親テーマをすでに削除しているなどして自分のPC上に存在しない場合は、もう一度公式サイトからダウンロードしておこう。

子テーマのフォルダにtmpフォルダとcontent.phpファイルが存在することを確認したら、次はWordPressの管理画面の左サイドバーの「外観」にある「テーマエディター」をクリックして「テーマの編集」画面を開こう。

上の画像のように、Cocoonの子テーマが選択されていることを確認しよう。子テーマが選択されているときは、「この子テーマは親テーマ Cocoon のテンプレートを引き継ぎます。」と表示される

そして、右側のテーマファイルに「tmp ▶」と表記されているフォルダがあるのでそれをクリックしてフォルダを展開し、「content.php」をクリックしてコードの編集画面に入ろう。

上の画像のように、content.phpの編集画面に入ることはできただろうか?

カスタマイズ

それでは、content.phpのコードの中身を見て行こう。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コードになる。

そして、このコードの中の

未編集のcontent.php内のPHPコード
<span class="fa fa-hourglass-half" aria-hidden="true"></span>

という部分が、「この記事は約〇分で読めます。」の左側に表示される「砂が半分流れ落ちた砂時計のアイコン」になる。

また

未編集のcontent.php内のPHPコード
この記事は<span class="bold">約%s分</span>で読めます。

この日本語が混じっている部分が、「この記事は約〇分で読めます。」にあたる。

このふたつを編集することで、記事中に表示される「記事を読む目安の時間」の文体を変更することができる


それでは、例として上記のコードをこのように書き換えて、ファイルを更新してみよう。もとのコードを消して、このコードをコピペするだけでも構わない。

編集済のcontent.php内のPHPコード
        <?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; ?>

本文上での表示

先ほどのようにコードを書き換えると、本文上ではこのように表示される。

カスタマイズ解説
  • 「この記事は約〇分で読めます。」だと少々長い気がしたので、かわりに「読了目安:」と書き換えて文章を短く簡潔にした
  • 砂時計のアイコンを示すFont Awesome部分を消して、faだけを残すことでアイコンを表示しないようにした。私は別に表示しなくてもいいかなと思ったので。
  • 「mycus-read-time-in」というdiv要素を付け加えてアイコンと文章の要素を括った理由は、CSSを用いてデザインをカスタマイズする際の自由度を高くするため。

砂時計のアイコンは下記のコードのように、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の公式サイトで探してみるのもいいかもしれない。

mycus-read-time-in」というdiv要素を「read-time」のすぐ下に付け加えた理由は、カスタマイズ性を上げるためである。

Cocoonデフォルトの設定のままでは「read-time」要素をinline-blockやflexにするとデザインが大きく崩れ、中央寄せにしたり疑似要素で装飾するときに融通が利かなくなってしまう。

なので、「read-time」の中に「mycus-read-time-in」という要素を作り要素を入れ子にすると、デザインのカスタマイズ性が大幅に向上するのだ。

外観のカスタマイズ

文体を変更したので、次は「記事を読む時間」全体のデザインのカスタマイズを行ってみよう。

設定

先ほどと同じく「テーマの編集」画面に入り、右側のテーマファイルバーの中に存在する「スタイルシート (style.css)」をクリックして子テーマのstyle.cssを開こう。

上の図のように、子テーマのstyle.cssを開くことができただろうか?


それでは、子テーマのstyle.cssにCSSコードを記入していこう。そのさい、「ファイルを更新」ボタンを押して保存しないとカスタマイズが反映されないので注意。

私はCocoon側に用意されているスキンを使っていないので、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;
}
/*ここまで*/

外観はこのようになる。

カスタマイズ解説
  • 先ほどの文体のカスタマイズで追加した「mycus-read-time-in」要素を主に使用する。これだけでカスタマイズの自由度が飛躍的に向上する。
  • 「.mycus-read-time-in」display: inline-block;と設定し、インラインブロック化する。これで内部の要素にぴったりとした大きさになった。
  • inline-blockはinlineのようなblockであり、上部と下部のmarginを設定することができる
  • あとは文字色を白に、背景を濃い色に変え、border-radiusで丸みを付けた。

ジャンル問わずほとんどのWebサイトに合うデザインとなった。いかにもCocoonという感じを無くして、他のCocoonを使っているブログとデザインの差別化を図りたい人にはいいかもしれない。

カスタマイズ例:鍋蓋風

鍋蓋のようなデザイン。デフォルトのデザインを少しカスタマイズした形になる。

CSSコード
/*記事を読む時間のカスタマイズ*/
/*ここから*/
.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;
}
/*ここまで*/

外観はこのような感じになる。

カスタマイズ解説
  • .mycus-read-time-in」をインラインブロック化する。
  • 蓋の部分は「.read-time」のborderを使った。

形状的に、お料理系のブログに合うかもしれない。また、色を変えるとタクシーのトップサインのようにも見えるので、交通系のWebサイトにも合うかも。

カスタマイズ例:巻物風

巻物のようなデザイン。古風な感じでけっこう目立ってくれる。

CSSコード
/*記事を読む時間のカスタマイズ*/
/*ここから*/
.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;
	}
}
/*ここまで*/

外観はこのようになる。

カスタマイズ解説
  • .mycus-read-time-in」をインラインブロックにする。
  • position: relative;」を設定し、疑似要素の絶対位置を設定しておく。
  • 巻物の帯の端っこの部分はborderを使った。その際、CSSコードが長くなり過ぎないように記入した。
  • スマホの画面サイズだと巻物の軸の位置がずれてしまうため、画面サイズが480px以下のときの軸のtopの位置を1pxだけ調整しなおした

歴史系だったり郷土資料のブログによく合うかもしれない。または忍者村や書道のブログなどにも。

カスタマイズ例:リボン風

両端を折り曲げたリボンのようなカスタマイズ。疑似要素をフルに使う。

CSSコード
/*記事を読む時間のカスタマイズ*/
/*ここから*/
.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;
	}
}
/*ここまで*/

外観はこのようになる。

カスタマイズ解説
  • .mycus-read-time-in」をインラインブロックにする。また、この要素はborderで囲ってリボンらしく強調する。
  • リボンの折り返しの部分は「約〇分」のspanの疑似要素を使用した。陰影はborderの4つの辺を使うことで表した。
  • 下のリボンの延長には「Font Awesomeのアイコン」のspanの部分の疑似要素を使用した。こちらはwidthとheightを使って表示している。
  • 最後に、リボンの切れ端は「.mycus-read-time-in」の疑似要素を使用した。また、切れ端の加工は折り返しと同じくborderの4つの辺を使うことで表した。
  • 疑似要素が下のほうに伸びたことで文頭の文章との間隔が少し狭く感じたので、「read-time」をmargin-bottom: 3em;と設定して文章3つぶんの間隔を作った。

ギフトであったり、何かの販促やプレゼントが主体のWebサイトに使えるかもしれない。また、SSだったり小説だったりを執筆しているWebサイトにもいいだろう。


まだまだデザインのカスタマイズ案は浮かぶが、ひとまずこれくらいにしておく。リボンのカスタマイズのCSSコードを応用出来たら、あなたも一通りのカスタマイズが組めるはずだ。

カスタマイズの注意点

私が上のほうで解説した記事を読む時間のデザインのカスタマイズ案は、本来Cocoonの記事を読む時間のPHPコードには存在していない「mycus-read-time-in」という私が付け加えた要素を使っている。また今回紹介したカスタマイズではアイコンも表示させておらず、文体も大幅に変えている

そのため、CSSコードだけをコピペするとデザインが崩れてしまう人もいるかもしれない

なので、「文体を変更するカスタマイズ」の項もよく読み、カスタマイズする際に疑似要素だったりborderやpaddingなどを使う場合は、自分でCSSコードを調節してみてほしい

最後に

Cocoonは時折アップデートしている。そのため、親テーマが新しいバージョンなのにカスタマイズを施した子テーマのPHPファイルが古いと場合によってはエラーが起きてしまったり、バージョンが上がったことで追加された機能が使えない場合も出てくる

「記事を読む時間」のPHPコードがガラリと変更されることはないかもしれないが、いちおう注意しておいてほしい。


私は記事を読む時間を設定していない。理由は、特につける必要もないと思っているからだ。

ただ、多くのCocoonを使っている人はこの機能を設定していると思う。また、自分も使う機会があるかもしれないので、今回のカスタマイズを忘備録的に記事にしておいた。一度やってみたことを書き留めず忘れてしまって、また必要になったことを一から思い出しながらやるのは非効率的なので。

それでは、また。この記事が役に立つと嬉しい。