Cocoonのテンプレートで記事ごとにCSSを適用させる方法をご紹介します!

Cocoonテンプレートで記事ごとにCSSを適用する方法のサムネイル

これは、Cocoonテンプレートの記事です。テンプレートを使っていると、記事ごとに内容は同じでよいが、クラス名だけは変えたいと思うことがあると思います。HTMLを少し修正するだけでできるので、PHPが苦手な方でも簡単に設定できます。それでは、詳しく紹介していきます。

そもそもテンプレートとは

テンプレートとは、WordpressテーマであるCocoonに搭載されている、記事でよく使う文章を定型化してくれる機能のことです。この機能を活用することで、記事を作成するときによく使う文章を自動的に記述してくれます。

例えば、以下のようなリストを使う時があったとします。

プロフィール

  • 猫と旅となんでも屋
  • メトロイドプライムのような冒険ができるゲームが好きです!普段はインドアですが、自然が好きで旅によく行きます!
  • 詳しくはこちら

このリストは、プロフィールなので記事の冒頭に毎回挿入したいです。しかしこのリストは、画像が添付されていたり、ハイパーリンクが設置されていたりと、ありとあらゆる装飾(以下、コーディング)がされています。このリストを、毎回記事で作成するのは面倒です。

そこで、テンプレートを使います。

このテンプレートを使うことで、[temp id=3]と記事に入力するだけで、PHPが動的に処理を行い、上記のようなプロフィールを出力してくれます。

このようにテンプレートは、大幅に労力を減らすことができる機能です。テンプレートの詳しい使い方は、WordPressテーマ「Cocoon」(外部リンク)で紹介しているのでこちらを見ていただければと思います。

記事ごとにCSSを変える

テンプレートを使っていると、記事やカテゴリーごとに、同じ内容でもコーディングを変えなければならない場合があります。

難しいやり方だと、ショートコードの括弧内にクラス名を指定することで個々にCSSを適用させる方法がありますが、PHPを使わないといけないので大変です。

そこで簡単なやり方である、<div>タグを使った方法を説明します。

①直接HTMLから編集する

Advanced Editor Toolsの場合

  1. 【ツール】をクリック→【ソースコード】をクリック
  2. ソースコードのポップアップが出るのでこの中に入力

ブロック挿入ツールの場合

  1. 画面左上の【+マーク(ブロック挿入ツール切り替え)】をクリック
  2. 【カスタムHTML】をクリック
  3. HTMLを入力欄に入力する

②divタグにクラス名をつける

例1:

<div class="test1">[使用したいテンプレート]</div>

例2:

<div class="test2">[使用したいテンプレート]</div>

先に説明した場所で、このようなHTMLを直接書くと記事ごとにコーディンができます。

③CSSを書く

例:

.test1{
padding: 1em;
border: 1px solid #000000;
background-color: rgba(101, 154, 210, 0.3);
}

.test2{
padding: 1em;
border: 1px solid #000000;
background-color: rgba(236, 0, 140, 0.3);
}

どのようなコーディングにするか決まったら、下書きの【カスタムCSS】か【外観】→【テーマファイルエディター】→【style.css】に追加しましょう。

④完成

ということで、内容は同じだけど背景色が違うプロフィールを作ることができました。

今回は、テストで作ったので雑なつくりになっていますが、CSSが使えればおしゃれに作ることができますので、みなさんも頑張って作ってみてください。

欠点

このやり方の欠点としては、特定の文章だけをコーディンするといった柔軟性がないことです。

テンプレートは、クラス名を指定することで大枠のコーディングはできますが、ショートコード内の特定の文章を強調するといったことができません。

どうしても、ショートコードで動的に文章を呼び出しているのでしょうがない点ではあります。もしやるのであれば、テンプレート自体を編集するか地道に打ち込んでいくしかないと思います。

まとめ

  • テンプレートとは、いつでも使えるように記事でよく使う文章を定型化する機能のこと
  • 記事ごとにCSSを変えたい場合は、記事ごとにショートコードをdivタグで囲み、クラス名をつけていく
  • 欠点は、文章のテンプレート化のためショートコード内の特定の文章を強調するといった柔軟性がない