[WordPressテーマ] TCDの有料テーマBlogPressの子テーマを作成してみた

WordPressテーマ

TCD 有料WordPressテーマ BlogPress

先日、TCDの有料テーマBlogPressが絶賛無料ダウンロードキャンペーン中というエントリーを書きましたが、ダウンロード出来るのは親テーマだけで子テーマは自分で用意する必要があります。

恐らくもう更新される事は無いテーマなので直接適用しても問題は無いように思いますが、WordPressの親テーマをそのままカスタマイズして利用するというのもちょっと抵抗があるので、当エントリーではBlogPressの子テーマを作成する手順を紹介したいと思います。

BlogPressの無料ダウンロードについてはこちらの記事を参考にしていただけると幸いです。

BlogPressの子テーマは手作業で作成

以前こちらのエントリーでプラグインを利用して子テーマを作成する方法を紹介しましたが

今回は手作業で作成します。

と言うのも、そのプラグインを利用してBlogPressの子テーマを作成してみたところ色々と不都合がありまして…非常に便利なプラグインなんですが残念ながらうまくいかないテーマもあるようです。

実際このBlogPressは一般的な子テーマの作成方法が通用しない部分があるので、「普通に作っちゃったけど？」という方は一度HTMLソースを開いてCSSの読み込み順など確認してみた方がいいかもしれません。

BlogPress子テーマのファイル構成

blogpress-child（任意の名前でも構いません）という名前でフォルダを作成し、その中に必要なファイルを入れて最終的に以下の構成になっていればOKです。

blogpress-child
 ├ admin
 │  └ my_admin.css
 ├ functions.php
 ├ header.php
 ├ screenshot.png
 └ style.css

それでは各ファイルの内容と説明を順番にしていきます。

my_admin.css

親テーマのadminフォルダにあるmy_admin.cssをコピってきて、子テーマにも同じフォルダ構成で配置します。これが無いとテーマオプション画面がこんな感じになっちゃいますんで…左がこのスタイルが適用されてない画面で右が本来のテーマオプション画面になります。

他にもっといい実装方法があるかもしれませんが、とりあえずこの方法が一番手っ取り早くて簡単ではないかと思います。

functions.php

子テーマでstyle.cssを読み込む方法としてはfunctions.phpで行うのが一般的なように思いますが、このBlogPressの場合はheader.phpで親テーマのstyle.cssとそれ以外のCSSをいくつも読み込んでいるのでその方法が使えません。

正確には使えないわけではなく、header.phpで読み込んでいる親テーマのstyle.cssより前に挿入されてしまうので、親テーマのスタイルを子テーマのスタイルで上書きするという子テーマ本来の役割が果たせないんですね。これはプラグインのInsert Headers and Footersを利用した場合も同様でした。

そこでどんな方法がいいか私なりに考えてみましたが、親テーマのheader.phpを子テーマにコピってきて、その中で子テーマのstyle.cssを読み込ませるのが一番マシかなという結論に。そんなわけでここではfunctions.phpは空で作成しておく事にしました。

テキストファイルに以下のコードをまるっとコピペして、functions.phpという名前で保存します。一応、お約束としてエンコードはUTF-8でBOM無しにしておいて下さいね？

functions.phpを空で作成
<?php
/*
style.cssの読み込みはheader.phpにて行う事にしたので
functions.phpは空で作成しておきます
*/
エンコードのUTF-8 BOM無しって何？というのはまた別の機会に紹介したいと思いますが、とりあえず今はそういうお約束的なものだという事でさらっと流していただきたい。よくわからない場合は親テーマか他のテーマのfunctions.phpをコピってきて中身をまるっと上書きしてしまいましょう。

特に必要無ければこのfunctions.phpを作成しなくても子テーマとして機能はするので、後から必要に応じて作成しても構いません。

header.php

まず親テーマからheader.phpをコピってきます。

親テーマのstyle.cssを読み込んでいる部分は20行目になります。

header.php 20行目

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css<?php version_num(); ?>" type="text/css" />

普通ならこの下で子テーマのCSSを…となるところですが、この後まだいくつかCSSを読み込んだり直接styleタグでコーディングしてたりするので、headの閉じタグ直前で子テーマのstyle.cssを読み込むようにしました。

という事で更にずっと下がって78行目、</style>と</head>の間にちょうど1行分のスペースがあるはずです。

header.php style.cssを読み込ませる場所
<?php if(is_admin_bar_showing()) { ?>
#description { top:28px; }
<?php }; ?>
</style>
	← この行！
</head>
<body class="<?php if(!is_paged() && is_front_page()) { echo 'index'; }; if(is_page()) { echo 'page'; }; if (!has_nav_menu('global-menu')) { echo ' no_global_menu'; }; if(!is_page_template('page-noside.php')&&!is_page_template('page-noside2.php')) : if($options['layout'] == 'left') { echo ' layout2'; } else { echo ' ' . $options['layout']; }; endif; if(is_page_template('page-noside.php')) { echo ' no_side'; }; if(is_page_template('page-noside2.php')) { echo ' no_side2'; }; ?> default">

ここに以下のコードをコピペします。

header.php 78行目

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style.css<?php version_num(); ?>" type="text/css" />

これで子テーマのstyle.cssを一番最後に読み込んでくれます。

screenshot.png

親テーマからscreenshot.pngをコピってきてそのまま利用するか、自分で適当に用意した画像をscreenshot.pngにリネームしてもOKです。この画像ファイルはダッシュボートのテーマ選択画面に表示されるだけなので無くても特に問題ありません。

とか言い切っちゃいましたがどこかに出てくる可能性はあるんだろうか…とりあえず無いよりはあった方がいいと思いますけどね？たぶん。

style.css

テキストファイルに以下のコードをまるっとコピペして、style.cssという名前で保存します。

style.css
@charset "UTF-8";
/*
Theme Name: BlogPress Child
Template: blogpress_tcd10
Version: 3.1.2
*/

基本的に単純コピペでOKですが、親テーマのディレクトリ名を変更した場合はTemplateの部分をその名前に置き換えて下さい。また、Versionはとりあえず親テーマと同じにしておいただけなので変更していただいても構いません。このファイルもfunctions.phpと同様にエンコードはUTF-8のBOM無しにしておいた方がいいでしょう。

BlogPress子テーマのアップロード・インストール

子テーマのアップロード・インストールには以下のような方法があります。

・FTPクライアント・ファイルマネージャーでアップロード
・ZIPファイルに圧縮してダッシュボードからインストール

こちらのエントリーでFTPを利用したアップロードについて紹介していますので、よろしければご参考までにどうぞ。

私としてはフォルダごと圧縮してダッシュボードからインストールする方が簡単でいいのではないかと思います。

BlogPressの子テーマ作成方法でした

私の場合はまだWordPressの経験がそれほど無いという事もありますが、このBlogPressのような構造のテーマは初めてだったので思った以上に苦労しました。

それゆえにこれが最適なBlogPressの子テーマとは正直言い難いですが、最低限その役割を果たすようにはしてみたつもりですので、BlogPressをダウンロードして実際に使ってみようと思った方に当エントリーがお役に立てば幸いです。

WordPressテーマBlogPress