WordPress Cocoon

【Cocoon】記事のタイトル周りをカスタマイズ

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回は投稿記事のタイトル周りのカスタマイズです。

カテゴリーとタグを表示するために、PHPのテンプレートもちょこっと編集しているのでカスタマイズ中級編って感じですね。どなたかの参考になれば幸いです。

親テーマからファイルをコピーして編集する

Cocoonは投稿記事と固定ページのタイトルが共通のclass名になっているので、そのままだとCSSの変更が両方に反映されてしまいます。

投稿記事のタイトルだけを変更したい場合は、PHPを少しいじる必要があります。固定ページのタイトルに反映しても良いという方はここは飛ばしてください。

FTPでファイルを子テーマにコピー

FTPクライアントソフトを使って、親テーマのテンプレートファイルを子テーマで編集できるようにします。

今回編集するファイルはtmpフォルダにある「content.php」です。階層はこんな感じになっています↓

wp-content > themes > cocoon-master > tmp > content.php

子テーマにtmpフォルダがない方は、フォルダも作って一緒にアップしましょう。

FTPクライアントソフトについてよく分からない方は、こちらの記事を参考にしてください。

FTPソフトCyberduckの使い方。親テーマのファイルを子テーマで編集してみよう
今回は親テーマの特定のファイルを子テーマにアップロードして編集するための手順をご紹介します。 STINGER7以外の方でも基本は同じですので、参考にしていただければと思います。

content.phpを編集してclassを追加

子テーマにコピーできたら管理画面からcontent.phpを編集します。24〜33行目の部分ですが、変更前はこんな感じですね↓

これを以下のように修正します↓

ハイライトされているのが追加したコードですが、以下の部分はカテゴリーとタグを表示するためのコードなので必要ない方は削除して大丈夫です。

内容としては「if(is_single)」で投稿ページだけを指定して、「post-title」のclassを付与しており、これで投稿ページだけにCSSを反映させることができます。

ここまで出来たらあとはCSSで調整するだけです。

記事タイトルの見た目をカスタマイズ

変更前のCSSはこのようになっています↓

.article h1」は投稿ページ、固定ページ、インデックスページなど共通のclass名ですね。

.entry-title」が投稿ページ、固定ページ共通のclassなので、両方に反映させたい場合はこのclassで指定すればオッケーです。

今回は投稿ページだけに反映させるため、先ほど新たに追加した「.post-title」を使って、擬似要素でグラデーションのラインをひいてみました。

こんな感じになります↓

下にボーダーをひくだけなら擬似要素がなくても「border-bottom: 1px solid #◯◯◯;」みたいな感じで大丈夫ですし、サイトに合わせて「color: #◯◯◯;」と文字色を変えたりするだけでも雰囲気は変わると思うのでお好みでどうぞ。

カテゴリーとタグの見た目を調整

「content.php」を編集して追加したカテゴリーとタグのCSSを調整します。

border-top-right-radius」と「border-bottom-left-radius」で右上と左下だけを角丸にしてみました。全部の角を丸くする場合は「border-radius」だけで指定すればオッケーです。数字が大きくなるほど丸みも大きくなります。

上記のCSSは記事下にカテゴリーやタグを表示している場合は同じように適用されるので、タイトル部分だけに反映させるには先ほどPHPで追加したclass名も追加します。こんな感じ↓

投稿日・更新日もカスタマイズ!

最後に投稿日と更新日もカスタマイズしてみました。CSSは以下の通り。

右揃えだったのを左揃えにしたのと、文字のサイズを少し大きくして色も薄めにしてみました。

それとFontAwesomeのアイコンを変更しています。投稿日のアイコンはデフォルトが時計マークですが、あんまり見かけない鉛筆マークにしてみました。
更新日の方はグルグル?みたいなアイコンにしてます。

アイコンを変えると記事一覧で表示されるアイコンも変わります。

FontAwesomeは他にもたくさんアイコンがあるのでお好みで変えてみてください。CocoonのFontAwesomeはバージョン4なので、下記ページの中から好きなアイコンを使うことができます。

Font Awesome Icons
Font Awesome, the iconic font and CSS framework

好きなアイコンをクリックするとコードが分かるので、それを先ほどのCSSの「content: “\f040;」の赤字の部分に置き換えるとアイコンも変わります。

 

ということでタイトル周りのカスタマイズをご紹介しました!皆さんも色々試してみてくださいね。ではまた〜♪

ひとこと
ひとこと

Cocoonはバージョン5のFontAwesomeは使えないから注意だぞ

WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

コメント