HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

ワードプレス 子テーマの作り方

スポンサーリンク


ワードプレスの有料テーマを導入すると多いのが、テーマのバージョンアップ。
ところが、テーマをカスタマイズしているところにバージョンアップをしてしまうと、
せっかくカスタマイズしたものが全部パーになります。

そこで子テーマが必要になるわけです。

子テーマは、親テーマがバージョンアップで上書きされても影響されませんから、
テーマをバージョンアップしても何の問題もでなくなるわけです。

有償、無償にかかわらず、テーマをカスタマイズする場合は、なるべく子テーマを作ってそちらをカスタマイズするようにしましょう。

 

ワードプレスの子テーマの作り方


 

子テーマのフォルダーの作成


 ワードプレスのテーマフォルダー( wp-content/themes/ )に「(親テーマフォルダー名)-child 」といったフォルダーを作成します。


 わかりやすいように 親テーマ名の名前に-childeとつけましたけど、子のフォルダー名は、なんでもかまいません。
 親テーマとの関係は、そのフォルダーの中の style.css で設定します。(後述)

 

子テーマフォルダーにファイルを作る


作成した子テーマフォルダーに以下の2つのファイルを作成します。
  • style.css
  • function.php

こちらに style.css と function.php のひな形を置いておきますのでご利用ください。
theme_child.zip (2369 ダウンロード)

 

子テーマの style.css の作成


style.css は、以下のような内容を記述して子テーマフォルダーにアップロードします。
※日本語が入る場合には、テラパッドなどを使用して、文字セットを UTF-8N で保存してください。
※ワードプレスのファイルは、UTF-8で保存されているので SHIFT-JIS のファイルは日本語が化けてしまいます。

 他はなんでもいいのですが、Theme Name と Template だけはしっかりと。
 Template は、親テーマのフォルダー名なのでくれぐれも間違いのないように。

/*
 Theme Name:   子テーマの名前
 Theme URI:    子テーマのURL
 Description:  子テーマの説明
 Author:       作成者名
 Author URI:   作成者URL
 Template:     親テーマのフォルダー名
 Version:      バージョン番号
*/

例えば、親テーマの名前を avant_tcd060 とします。
/*
 Theme Name:   avant_tcd060_child
 Theme URI:    http://~/avant_tcd060_child/
 Description:  avant_tcd060_child
 Author:       ほにゃほにゃ
 Author URI:   http://~/
 Template:     avant_tcd060
 Version:      1.0.0
*/

言ってしまえば、子テーマの style.css は、以下だけあればOKですwww
/*
 Theme Name:   avant_tcd060_child
 Template:     avant_tcd060
*/

 

子テーマの function.php の作成


次に function.php に以下を記述して子テーマのフォルダーにアップロードします。
<?php
add_action('wp_enqueue_scripts','theme_enqueue_styles');
function theme_enqueue_styles() {
 wp_enqueue_style('parent-style',get_template_directory_uri()  .'/style.css');
 wp_enqueue_style('child-style' ,get_stylesheet_directory_uri().'/style.css', array('parent-style') );
}
?>

 

子テーマの サムネイル画像


もちろん、なくてもかまいません。モチベーションを上げる目的のためだけにこの項目を書いていますwww

子テーマのフォルダーの中に screenshot.png を入れておけば、テーマ選択画面でサムネイルが表示されます。

screenshot.png のサイズは、300 x 225 あたりの比率で作るとキレイ・・・みたい(主観)

もちろん、親テーマの screenshot.png を持ってきてもかまいません。

 

子テーマの実装


手順としては、これでおしまいで、あとは外観 ⇒ テーマ で子テーマを選択すれば終わりです。

実際のカスタマイズは、この子テーマのフォルダーの style.css に書き足せばOKです。

他のファイル、function.php 、テンプレートなども、この子テーマのフォルダーに入れることで反映されます。


子テーマ の style.css の例


/*
 Theme Name:   avant_tcd060_child
 Theme URI:    http://~/avant_tcd060_child/
 Description:  avant_tcd060_child
 Author:       ほにゃほにゃ
 Author URI:   http://~/
 Template:     avant_tcd060
 Version:      1.0.0
*/
.title_width{
width:550px;
}
.title_color{
color:#cc0000;
}

子テーマ作成プラグイン


と、面倒な説明は省きまして、子テーマを作成するプラグインを書いたのでお試しください。

make_child_theme.zip (35 ダウンロード)

子テーマ作成プラグインの使い方


  1. 外観⇒テーマで子テーマを作りたいテーマに切り替えます。
  2. ワードプレスのプラグイン新規追加
  3. プラグインのアップロード
  4. ファイル選択でこのファイルを指定
  5. 今すぐインストールでインストール
  6. プラグインの有効化
  7. 設定の中の「ゆずまるの子テーマ作成」
  8. 「”今使っているテーマ”の子テーマを作ります」にチェックを入れて、変更を保存
  9. 外観->テーマで、子テーマを選べるようになっています。


子テーマ作ったら、このプラグインは停止させて削除しておくことをお薦めします。
間違って、再実行すると子テーマに作ったファイルが上書きでまっさらになってしまいますw

さらにテーマフォルダーをきれいにしようと「つかっていない」テーマを削除するとき・・・
(しないかな?w)間違って親テーマまで削除しないようにしてくださいね。

子テーマだけでは動きませんw

スポンサーリンク

スポンサーリンク

よく使うタグ

・float クリア
<br clear="all"><div style="clear:both;" class="clearfix"></div>
・角丸め
round-radius
border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;
・div box
overflow:scroll;min-width:300px;max-width:300px;min-height:300px;max-height:300px;
・TEXTAREAリサイズ
resize: vertical;
・サイトURL
home_url() // http://…
if(site_url()==home_url){
$shorturl_yuzu_path = substr(ABSPATH,0,strpos( ABSPATH, substr(site_url(),strlen(home_url()) ) ) ).’/’;
}else{
$shorturl_yuzu_path = ABSPATH.’/’;
}
// /var/…
・WP HOME URL
site_url() // http://…/wp
ABSPATH // /var/…/wp
・プラグイン(自分のDIR追加必要)
plugins_url() // http://…/plugins
WP_PLUGIN_URL // http://…/plugins
WP_PLUGIN_DIR // /var/…/plugins
・使用中のテーマ
get_template_directory_uri() // http://…/theme/xx
get_template_directory() // /var/…/theme/xx
・wp-content
content_url() // http://…/wp-content
WP_CONTENT_DIR // /var/…/wp-content
・画像URLからDIR変換
$pctdir=str_replace(content_url(), WP_CONTENT_DIR,$pcturl);
・パス名分解
$pathData = pathinfo($file);
echo $pathData["dirname"]; // /var/~
echo $pathData["filename"]; // xxx
echo $pathData["extension"]; // txt
echo $pathData["basename"]; // xxx.txt
・画像サイズ
list($width,$height) = getimagesize($url);
if(has_post_thumbnail()){
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘full’ );
$src = $image[0]; //url
$width = $image[1]; //横幅
$height = $image[2]; //高さ
・画像サイズ比率
list($src_w,$src_h) = getimagesize($file);
$dst_w = 600;$dst_h = 0;
$dst_h = ($dst_w!=0)?(intval(($src_h*$dst_w)/$src_w )):(($dst_h!=0)?(intval(($src_w*$dst_h)/$src_h)):0);
・疑似要素順
link visited hover active


特殊文字
シングルクォート : &#39;
ダブルクォート : &quot;
WP設定内表示前処理(htmlタグ許可項目)
$str = str_replace(‘<','&lt;' ,$str);
$str = str_replace(‘>’,’&gt;’ ,$str);
$str = str_replace(‘\”‘,’&quot;’,$str);
$str = str_replace(“\'”,’&#39;’ ,$str);
WO設定項目表示前処理(htmlタグ許可項目)
$str = str_replace(‘\”‘,'”‘,$str);
$str = str_replace(“\'”,”‘”,$str);
・テーマ
get_theme_root_uri()
get_theme_root()
・WP 情報
get_bloginfo( $show )
・Wp config FTP 情報 設置
define( ‘FTP_HOST’, ‘host’ );
define( ‘FTP_USER’, ‘id’ );
define( ‘FTP_PASS’, ‘pw’ );
define( ‘FTP_SSL’, false );
弾に使う
placeholder:ユーザー入力補助

カテゴリー

FB 広告 最適化~グーグルアナリティクスとサーチコンソールの連動のさせかた(必要な分だけ)

FB 広告 最適化~グーグルアナリティクスとサーチコンソールの連動のさせかた(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルアナリティクスとサーチコンソール。別にグーグルのアナリティクス、サーチコンソールでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲

FB 広告 最適化~グーグルアナリティクスの使い方(必要な分だけ)

FB 広告 最適化~グーグルアナリティクスの使い方(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルアナリティクス。別にグーグルのアナリティクスでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲い込みの為他のアクセス解析では見せな

FB 広告 最適化~グーグルサーチコンソールの使い方(必要な分だけ)

FB 広告 最適化~グーグルサーチコンソールの使い方(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルサーチコンソール。別にグーグルのサーチコンソールでなくてもいいんだけど、グーグルはユーザー囲い込みの為他のアクセス解析では見せなくしたキーワ

FB 広告 最適化~グーグルのアクセス解析の基本

FB 広告 最適化~グーグルのアクセス解析の基本 FB広告を最適化するためには、アクセス解析が重要なカギを握ります。FB広告から当該ページに飛んでくるときURLにオプションを付けることができます。このURLにつけたオプションを使ってどの広告から、どん

jQuery ボタンを押しても反応しない

jQuery ボタンを押しても反応しない jQuery の click イベントを使ってボタンを押したら alert を表示する簡単な仕様なのになにも反応しない。一瞬はまってしまうことって・・・ありますよね?例えば、こう書きます。popup.

WP パーマリンク リダイレクト インターナルサーバーエラー

WP パーマリンク リダイレクト インターナルサーバーエラー WP パーマリンクのリダイレクトがインターナルサーバーエラーを起こすようになった。ユーザーさんのサイトなので「なにをしたか」わからない。WP パーマリンク リダイレクト インターナルサーバーエラーのい