《Cocoonを例に徹底解説!》WordPressテーマをカスタマイズする手順まとめ

WordPressテーマをカスタマイズする手順まとめWEB

このブログではWordPressテーマの「Cocoon」を使わせてもらっています。使えば使うほど丁寧なつくりがよくわかり、このテーマを選んで本当に良かったと思っています。

Cocoonは知識があまり無くても、設定メニューからある程度カスタマイズできるので、初心者の方でも安心して使えます。

メニューでできるカスタマイズ以外については、CSS、PHP、Javascriptなどを使います。

今回はCSSで行うカスタマイズ方法について、順を追ってできるだけわかりやすく解説していきたいと思います。

カスタマイズする箇所を決める

今回はサイドバーの見出しをカスタマイズすることを例に説明します。

カスタマイズ箇所

デザインを考える

手書きでもなんでもよいので、デザインを考えます。

今回はこんな感じのデザインにしてみようと思います。この画像はPhotoShopで作成しました。

”最近の投稿”箇所しかデザインを変更していませんが、サイドバーのタイトルは全て同じデザインにする想定です。

デザインイメージ

CSSを調べる

Google Chrome の ”デベロッパーツール” を使ってCSSを調べます。

FireFoxなどでも同様の機能があります。

(1) Google Chrome を起動する

(2) 画面右上のメニューから、〔その他のツール〕-〔デベロッパーツール〕を選択

デベロッパーツール

(3) 〔Elements〕、〔Styles〕を選択し、左上の矢印アイコンを選択

デベロッパーツール設定

(4) カスタマイズしたい箇所を選択

カスタマイズ箇所選択

(5) 選択箇所のHTMLとCSSが表示されるので、該当箇所を確認

HTML箇所を見ると、カスタマイズ箇所は”h3″タグになっており、その親には”sidebar”というクラスがあります。

CSS箇所を見ると、sidebarクラスの子要素のh3タグに対する記述があるので、これをベースに編集すればよさそうなことがわかります。

これを編集すると、”最近の投稿”以外のh3にも適用されます。

選択箇所のHTMLとCSS

(6) 編集したいCSS箇所のリンクをクリック

CSSへのリンク

(7) 実際のCSSの記述箇所が表示されるので、該当箇所をコピー

CSS

CSSを編集する

本番サーバーと同じ環境のテストサーバーがあり、ローカルにあるファイルを各サーバーにアップロードする想定で説明をすすめます。

① ローカルにある、子テーマの “style.css” をテキストエディタなどで開く

ローカルファイルを開く

WordPressテーマによって階層構造や記述ファイルは異なると思いますが、Cocoonを例に説明させてもらいます。

② コピーしたCSSコードを貼り付ける

.sidebar h3 {
  background-color: #f3f4f5;
  padding: 12px;
  margin: 16px 0;
  border-radius: 2px;
}

③ 貼り付けたCSSをベースに編集する

.sidebar h3 {
  background-color: transparent;
  padding: 0px 11px 0px 18px;
  margin: 28px 0 28px 6px;
  border-radius: 0px;
  border-left: solid #000 10px;
}

CSSの意味や記述方法については、本記事では触れませんので、書籍やWeb検索等をご活用ください。

④ テストサーバーにアップロードする(FTPクライアントソフトなどを使用)

テストサーバーにアップロード

⑤ ブラウザで表示を確認する

カスタマイズ結果

“最近の投稿”以外の見出しも表示が変わっているのは、sidebarクラスの子要素のh3タグ全てに対して表示を変えているからです。

※意図した表示になっていなかったら③~⑤を繰り返す

本番サーバーにアップロードする

① 動作確認済みのCSSファイルを本番サーバーにアップロード(FTPクライアントソフトなどを使用)

本番サーバーにアップロード

② 正しい表示になっていることを確認

カスタマイズ結果

これで完了です。

まとめ

今回はCSSで変更可能なカスタマイズについて説明をさせてもらいました。

カスタマイズを進めていくと、CSSだけではどうしても対応できないものが出てくると思います。

そのような場合は、PHPや、Javascriptも使用してカスタマイズすることになります。

ただ、PHPなどはテーマのバージョンアップによる影響が大きいので、なるべくCSSでのカスタマイズにした方がよいと思います。

本記事がWordPressテーマカスタマイズの参考になれば幸いです。

関連記事

ローカル環境にテストサーバーが欲しい場合は、以下の記事も参考になるかと思います。