《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テーマカスタマイズの参考になれば幸いです。

関連記事

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

開発環境をある程度しっかり構築したい方にはこちらの記事もおすすめです。

THIS POST
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
MEMO WEB
COLOR CODE