Blog

[WP] テーマの選定と子テーマの作成

データを移行したらテーマを選定して自分のコンテンツやスタイルに合うテーマを探します。
テーマの選定は WordPress の管理ツールから簡単にできますし、先人の参考になるエントリが山ほどありますので、それらを読んで好みのテーマを選ぶと良いと思います。

そして、テーマを選んだら、過去のエントリで使っている CSS のカスタマイズなどを追加するために子テーマを作成して微調整を行います。


テーマの選定

今回のテーマ選定では以下のエントリを参考にさせていただき、WordPress のテーマについて基礎知識の習得に励みました。
今回は無料で使っていいのか疑問に思うほどクオリティの高いテーマを150テーマ集めてみました。WordPressを使っている人も、これから使おうと思っている人もきっとお気に入りのテーマが見つかると思いますよ。
 
今回は、これが本当に無料?と思ってしまうくらいにクオリティーが高いWordpressのテーマを33選取り上げてみる。なるべく、他で取り上げられていないようなテンプレートを掲載した。
 
So when it comes to wordpress theme design,more and more responsive wordpress are being released nowadays.Well,of course almost all are premium but we can also find a few free responsive wordpress themes.In today’s post,we have gathered free responsive wordpress themes.Have a look at this great collection!!


最終的には

  • アイキャッチ画像が必須ではないテーマにすること

    Blogger から移行したコンテンツ全てにアイキャッチ画像を設定して回れないので
  • スマートデバイスにも対応した画面にしたいので Responsive デザインを採用しているもの

の 2 つを意識して、WordPress の管理ツールの検索で Responsive をキーワードに検索して BirdTips テーマを選びました。
BirdTIPS is a flexible three-column blog theme. The theme uses CSS3 media queries for its responsive layout and is therefore optimized for tablet pcs and smart phones. Features include the page navigation and breadcrumb navigation. You can also choose the link color, article title color and navigation menu color.


割とすっきりしていて、それでいて味気なくも無いので気に入りました。


子テーマを作成する

WordPress では、テーマとは違うスタイルを設定するためには、子テーマを作るのが正しいアプローチのようです。
今回は BirdTIPS の CSS の変更と ShareHTML 用のスタイルなどを定義するために子テーマを作ります。

子テーマは、 WordPress の Themes ディレクトリに新しくフォルダを一つ作り style.css を作れば OK です。この style.css には少し呪文を書いておきます。


Theme Name テーマを格納したディレクトリの名前
Theme URI 無くても良い。本来は Theme を説明しているサイト
Description Word Pressのテーマ管理で表示される説明
Author 作者の名前
Author URI 作者の URL
Template 元にした Theme 名
Version バージョン番号なので適当で構いません


もう一つの呪文ですが、親テーマの style.css を @import を使って読み込んでおきます。

ここを正しく設定すると WordPress のテーマの管理で選択することができるようになります。

120803 0008

このあたりのことを簡単にやろうとするなら、One-Click Child Theme という Plugin があるようです。私は仕組みを理解することを求めたので手書きでやりましたが、こういうプラグインを使っても良いと思います。

style.css をいじろう

作成した子テーマの style.css をいじります。親テーマのスタイルで気に入らないところなどは、子テーマ側に同じセレクタを書いてしまえば、子テーマ側が優先されます。

(ソースを見ると分かりますが親テーマ側では !important を宣言していないので、先に読み込まれる子テーマ側のセレクタが有効になる仕掛けです)。

今回は、画像に枠が付くのが嫌なのと、リンクのアンダーラインを消したかったので、以下のようなスタイルを子テーマ側に定義しました。

もしおかしくしてしまったら子テーマを削除してしまえば良いですし、親テーマがバージョンアップしたときにも子テーマ側は影響を受けないので、このようなカスタマイズの仕方は本当に便利ですね。

header.phpをいじろう

子テーマは style.css だけではなく、親テーマの PHP ファイルを上書きすることもできます。
Google Analytics のトラッキングコードや Favicon の設定などはヘッダに入れるので、 header.php を子テーマのディレクトリにコピーして必要なところを修正するだけです。

オリジナルを直接触らないということはオリジナルのバックアップを取らなくて良いということです。
また、うまくいかなくなってしまったら子テーマをサーバから移動させてしまえばデフォルトに戻ります。

この仕組みは本当に楽ですね。他のPHPファイルも同様に修正することができます(functions.phpだけは癖があるらしいので修正する時は注意が必要です)。
みなさんもカスタマイズにトライされてはいかがですか?

WordPress 関連のエントリ


インストールや設定変更とデータ移行




プラグイン




バージョンアップ




カスタマイズ





Stinger 3関連





チューニング





MAMPを使ったバックアップサイトの構築





開発関連







最後まで読んでいただきありがとうございます。

follow us in feedly 左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいです


Facebook ページでも情報を発信していますのでよろしかったら「いいね!」をお願いします

RSSリーダへの登録は こちら からどうぞ。

URL
TBURL

コメントとトラックバック

  • Comments ( 0 )
  • Trackbacks ( 4 )

No commented yet.

  1. […] [WP] テーマの選定と子テーマの作成 | 最近,気になったこと… […]
  2. […] [WordPress] テーマの選定と子テーマの作成 « 最近,気になったこと… […]
  3. […] [WP] テーマの選定と子テーマの作成 « 最近,気になったこと… […]

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

フェイスブックでのコメント

Return Top