WordPressお役立ちTips集~カスタマイズの手順~

このアホアホサイトを構築する時に、考えたのは・・・。
ブログアフィリエイトのお師匠様である、だいぽんさん推奨の、3カラムで作成すること。
でも、デフォルトテーマには3カラムはないし・・・。
無料・有料のテーマでいいのないかな・・・と探したけれど、なんかピンと来ず・・・。
ここで、無謀にも思いついてしまった。
ほんなら、自分でこさってしまえ~~~!と。
そして、デフォルトテーマのtwentytwelveのカスタマイズを始めてしまったのだった。

当時の私、HTMLは少し分かっていても、CSSとかPHPとか・・・。
まったく、弄ったことがなかった。
今思い返せば、なんて無謀なことを・・・と思うけれど。
それでも、あ~でもない、こ~でもない、と弄り倒し・・・。
こうやって、なんとか運営している。
案ずるより、産むが易し、とはよく言ったものやなぁ・・・。

このアホアホサイトは、WordPressのデフォルトテーマ、twentytwelveをカスタマイズした。
以下は、その大雑把な手順。

まず、子テーマのフォルダを作る。
子テーマのタイトルは、childとか、そんな感じで大丈夫。
それを、WordPressをインストールしているサーバーにアップロードする。
次に、フォルダの中身を作る。
作るのは、次の2つ。
style.cssとfunctions.php。
windows7以降なら、メモ帳で作成可能(だったと思う)。
style.cssには、以下のように記述する。

/*
Theme Name: Child
Template: twentytwelve
*/

@import url('../twentytwelve/style.css');

赤字のところは、子テーマのフォルダ名。
緑字のところは、デフォルトの親テーマ。
他のデフォルトテーマ、twentythirteenやtwentyforteenなどをカスタマイズする場合は・・・。
その親テーマ名を緑字のところに記述する。

もうひとつのfunctions.phpには、以下のように記述する。

<?php
?>

functions.phpに記述するのは、とりあえずこれだけ。

この2つを、文字コードをUTF-8にし、それぞれ、style.cssとfunctions.phpの名前にして・・・。
子テーマのフォルダに保存する。

それが終わったら、WordPressのダッシュボードのメニューから・・・。
「外観」→「テーマ」と開き、アップロードした子テーマが反映されているか、確認する。
確認できたら、子テーマを有効化する。

で・・・。
デフォルトテーマのカスタマイズをするときは、面倒でも子テーマを作り・・・。
その子テーマをカスタマイズするようにしたほうがいい。
というのは・・・。

セキュリティのため、WordPress本体やプラグインを・・・。
最新バージョンにアップデートするけれど、デフォルトテーマにもアップデートはある。
子テーマを作らずに、カスタマイズし、デフォルトテーマをアップデートすると・・・。
カスタマイズした内容が、キレイさっぱり消えてしまうから。
苦労したカスタマイズが、文字通り水泡と帰してしまうから。
WordPress系のブログなどでは、デフォルトテーマのstyle.cssやfunctions.phpを・・・。
直に弄れ、と書いてあるけれど・・・。
テーマのアップデートを考えると、面倒でも子テーマでカスタマイズした方がいい。

子テーマの上記2つをカスタマイズするときは・・・。
style.cssの場合は、
@import url('../twentytwelve/style.css');の下に、カスタマイズする内容のCSSを記述。
例えば、メインカラムやウィジェットの幅などの指定をする時。

functions.phpの場合は、
<?php  ?> の間に、カスタマイズする内容のCSSを記述。
例えば、サイドバーをもうヒトツ増やす場合などは・・・。
<?php
register_sidebar( array( 長いから以下省略
?>
のような感じでCSSを記述する。

子テーマを作らず、親テーマをそのままカスタマイズし・・・。
デフォルトテーマのアップデートをきっかけに、子テーマをつくる場合。
親テーマのfunctions.phpをそのまま子テーマにコピーすると、エラーで画面が真っ白に。
これは、functions.phpだけが他のphpと違い、子テーマで読んだあと、さらに・・・。
親テーマのfunctions.phpまで読みにいくので、関数を二重に読み込むため。
回避するために記述するCSSもあるけれど。
</php  ?>のシンプルなfunctions.phpを作る方がラク、やと思うよ~。

 

公開日:
最終更新日:2015/08/15