●wordpress子テーマの作成方法



■wordpressのテーマに更新があった時、
他人事のように
なごやかに微笑みながら対応したい、
あなたへ。


 
 
「wordpress子テーマを
つくっておかないと
テーマにバージョンアップが
かかった時、
 
 
せっかく行った
あなたのカスタマイズが
消えてなくなります。」
 
 
今回は
wordpress知識がある人向けです。
(専門用語の説明はしません。)
 
 
そして、
知っている人には恐ろしい話です。
 
 
wordpress子テーマをつくれば、
テーマバージョンアップで
あなたのカスタマイズ部分が
消えてしまうのを阻止します。
 
 
もし、wordpress子テーマを作らなければ
あなたが「こだわって」作った部分を
 
 
調べて、修正して、テストする
「面倒」なことを
「毎回」しなくてはならなくなります。
 
 
(毎回ですよ!)
 
 
子テーマを作っておくと
カスタマイズ箇所が
把握できるため
他のテーマにも移行が楽です。
 
 
もし、あなたがwordpressでサイトを作るのであれば、
子テーマをつくることは、必須です。
 
 
子テーマを作る方法は簡単なので、
先送りせず(いつかやることです!)、
この際、あなたも作ってみましょう!
 
 
 
 

■それで、
wordpress子テーマを
作るのは難しいのか?

 
 
調べると
wordpress子テーマを
作るのは簡単でした。
 
 
以下の「4ステップ」で
出来ます。
 
 
●ステップ1:子テーマフォルダを作成
●ステップ2:style.cssを作成
●ステップ3:style.cssを子テーマフォルダに転送
●ステップ4:wordpressダッシュボードのテーマで選択 
 
 
 

■ステップ1:子テーマフォルダを作成

 
 
ここでは、
子テーマ用のフォルダを作成します。
 
 
例えば、
 
 
現在使用しているテーマ(twentyfourteen)が
以下にあるとします。
 
 
サーバー/wp-content/themes/twentyfourteen
 
 
そこに同列で、
子テーマ用フォルダを作成します。
 
 
作成するには
FTPソフトで「フォルダ作成」を
行います。
 
 
名前は何でもいいです。
ここでは、twentyfourteen_childとします。
 
 
サーバー/wp-content/themes/twentyfourteen_child
 
 
 
 

■ステップ2:style.cssを作成

 
 
あなたのパソコン上で
テキストエディターを使用して
style.css作成します。
 
 
作成するには、
unicode(UTF-8)、
改行コード(LF)で保存できる
テキストエディターを使用します。
 
 
テキストエディター
例:秀丸など
(メモ帳では出来ません。)
 
 
それで、
以下を書きます。
(「ー」は含まない)
 
 
ーーーーーーーーーーーーーー
/*
Theme Name: Twenty Fourteen child
Template: twentyfourteen
*/
@import url(‘../twentyfourteen/style.css’);
ーーーーーーーーーーーーーー
 
 
「:」の後には、半角スペースを入れます。
 
 
●Theme Nameは
ダッシュボード_テーマで表示される名称です。
 
 
●Templateは
元(親)テーマです。
 
 
●@importは
カスタマイズで上書きするstyle.cssです。
(借りているだけなので
元ファイルには修正されません。)
 
 
以上の3つを書いた後に
style.cssにカスタマイズしたことだけを
書きます。
 
 
書いたこと以外は、
元のstyle.cssの設定内容になります。
 
 
例えば、フォントを変えたい場合
「メイリオ」にするには、
@import行以下に書かれたことが
優先されます。
 
 
元ファイルより該当箇所をコピーして、
カスタマイズしたいことを書きます。
 
 
この場合、
「font-family:」の設定値を変えます。
 
 
ーーーーーーーーーーーーーー
/*
Theme Name: Twenty Fourteen child
Template: twentyfourteen
Description: twentyfourteen用ローソク足用子テーマ
*/
@import url(‘../twentyfourteen/style.css’);
body,
button,
input,
select,
textarea {
color: #2b2b2b;
font-family: ‘メイリオ’,Meiryo,’Hiragino Kaku Gothic Pro’,’ヒラギノ角ゴ Pro W3′,’MS Pゴシック’,sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
code,
kbd,
tt,
var,
samp,
pre {
font-family: ‘メイリオ’,Meiryo,’Hiragino Kaku Gothic Pro’,’ヒラギノ角ゴ Pro W3′,’MS Pゴシック’,sans-serif;
font-size: 15px;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
line-height: 1.6;
}
ーーーーーーーーーーーーーー
 
 
作成したstyle.cssを、
unicode(UTF-8)、
改行コード(LF)で保存します。
 
 
 
 

■ステップ3:style.cssを子テーマフォルダに転送

 
 
あなたのパソコンから
FTPソフトを使用して
作成したstyle.cssを
サーバーの子テーマ用フォルダに転送します。
 
 
 
 

■ステップ4:wordpressダッシュボードのテーマで選択

 
 
wordpressダッシュボードのテーマに
新しいTheme Nameで指定したテーマが
表示されます。
 
 
それを選択して、
有効にすると
子テーマが反映されます。
 
 
 
 

■その他

 
 
style.css以外のファイル(php)に
カスタマイズしている場合、
 
 
そのファイルは、
ロジック(動作指示)になっているので
書いてある行の順序に意味があります。
 
 
そのため、
style.cssのように
カスタマイズしたところだけを
抜き出して、書くことは出来ません。
 
 
新テーマより
該当ファイルを
 
 
あなたのパソコンに転送して
修正した後、
子テーマフォルダに
転送します。
 
 
functions.phpのみが
動作が違うようなので
別途、調べてください。
 
 
 
 
「よかった」と思われたら、
人気ブログランキングに
投票をお願いします。
 
以下の「人気ブログランキングアイコン」を
「クリック」して投票してください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です