こんにちは。

今回は自作テーマに比べて比較的に簡単と言われるWordPressのテンプレートテーマをカスタマイズする方法を実務を通して勉強させていただいたので、実務を通し気づいたこと知らなかったこと、気をつけるべき点や出来たら提案が唸るようなこれから勉強すべきスキルなどを記録として残しておきます。

親テーマを複製して子テーマを作成する

もはや当たり前では在るが一応内容を書き記して行きます。

WordPressテーマの読み込む順番は、

「functions.php　→　親テーマ　→　子テーマ」

という順番で読み込まれる為、子テーマとしてテンプレートファイル（header.phpやfront-page.php）があればそれは最後に読み込まれる為親テーマの内容を上書きしてくれます。

※ただしfunctions.phpだけは先に読み込まれる為注意。

子テーマとして認識させる

複製したファイルを子テーマとして認識させるためにはスタイルシートに一文追加します。

@charset "utf-8";
/*
Theme Name: Lightning Pro Child
Theme URI:
Template: lightning-pro
Description:
Author:
Tags:
Version: 0.0.0
*/

Template: ここに読み込ませる親テーマを記載

これだけで子テーマとしての認識は可能です。

次に親テーマのスタイルシートを継承する為の記述をfunctions.phpを作成して記述します。また独自のCSSとして読み込む為の記述もします。

//親テーマのトレースと独自CSSの読み込み
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') );
}

これでCSSを追加したりHTMLを追加するなどして子テーマのカスタムを進めることが可能になりました。

テンプレートである注意点

さてこの章は案件やクライアント様によって変わるのですが、

WordPressのテンプレートでの作成をするということはお客様自身なにかしらのカスタマイズを加えていたり、ウィジェットやメニューとして登録していることが十分に考えられます。

実例としては有料テーマのLightningProを使用されるお客様で持ち込まれた形でのコーディング案件で、

トップページ以外のAboutコンテンツやブログ、サービス内容等はお客様自身でカスタムされているご様子でした。

なので当然、ナビメニューやウィジェットなどを使用してコンテンツを追加しておられました。

ここで気をつけなければならないのはHTMLのベタ書きいわゆる「ハードコーディング」をしてしまうとお客様としては有料テーマのカスタマイズ性が失われてしまい問題になるという点です。

この問題に対しては中々ハードルが高く、中にはとてつもなく実装が難しものも在ると思います。（勉強せい）

しかし当然そんなことはお客様は知る由もないため

私とクライアント様の認識の違いを汲み取る必要がある。

• CSSを編集する以上デザインが崩れる恐れが在ること
• 既存のシステムを改変することは難しい為一からの実装になる事
• 必要であればプラグインの実装が必要になること

これらの内容はいかに容易な案件であってもお客様にはしっかりと伝えるべきである。

そしてお客様のサイトを隅々までしっかりと観察し、その内容を把握することは基本でありとても大事です。

ハードコーディングを避ける技術

ここからはハードコーディングをなるべくしないようにするために、

テンプレート制作では必須だと思える技術を列挙していこうと思います。

ナビメニューを制作する

これはいわゆる管理画面から操作可能なナビメニューを作成しようということです。

簡単にLightningProの例を上げておきます

<?php if ( has_nav_menu( 'Header' ) ) : ?>
 <div id="gMenu_outer" class="gMenu_outer">
<?php
wp_nav_menu( array(
'theme_location' => 'Header',
'container'      => 'nav',
'items_wrap'     => '<ul id="%1$s" class="%2$s ' . lightning_get_the_class_name( 'nav_menu_header' ) . '">%3$s</ul>',
'fallback_cb'    => '',
'walker'         => new description_walker(),
) );
?>
</div>
<?php endif; ?>

詳細な説明は省きますが、簡単に説明すると

もしナビメニューが有効化されていたら、wp_nav_menuでナビメニューを出力するという記述です。

簡単なので今一度自身のサイトで複数作成するなどして復習しておきましょう。

ウィジェットの制作

これはかなり難易度が高く自分で作るとなると難しいものもあります。

いわゆるPHPを利用したフォームの制作に似てはいるため、どこまで管理画面から設定できるかを練習しておく必要がありそうです。

LightningProではBootstrapのレイアウト用クラスの数字にリンクさせて管理画面からレイアウトを変更できるようになっていました。

簡単にですがこちらの製作工程のコードを紹介します。

<?php
class Widget_Template extends WP_Widget {

  public function __construct()// 初期化処理（ウィジェットの各種設定）を行います。
 parent::__construct( false, 'テンプレートウィジェット' );
    }

 public function widget( $args, $instance ) {
// ウィジェットの内容をWebページに出力（HTML表示）します。
    }

 public function form( $instance ) {
 // 管理画面のウィジェット設定フォームを出力します。
 }

 public function update( $new_instance, $old_instance ) {
// ウィジェットオプションを安全な値で保存するためにデータ検証/無害化します。
  }
}

これに加えて、ウィジットエリアを登録するアクションフック関数と合わせて使用します。

<?php
function my_register_widget() {
    register_widget( 'Widget_Template' );
}
add_action( 'widgets_init', 'my_register_widget' );

そして表示したい場所にコードを追加します。

// ウィジェットを出力するテンプレートファイル
<?php if(is_active_sidebar('設定したid')): ?>
    (<ul>)
        <?php dynamic_sidebar('設定したid'); ?>
    (</ul>)
<?php endif; ?>

これでウィジェットエリアのカスタマイズは問題なく雛形として制作することが出来ます。

詳しくは別に詳細の記事を上げておりますのでご参考くだされば幸いです。

WordPress　ウィジェットを自作する（エリアの設置から内容まで）

アクションフックでコンテンツを登録する

この章ではWordPressのアクションフックを使用したHTMLの記述方法、をご紹介します。

WordPressにはまずアクションフックという概念があり、

これを利用することでユーザーの思い通りにサイトの仕様や機能をカスタマイズすることが可能になっています。

テーマの中の do_action()を探そう

テーマやプラグインによってはカスタマイズしやすいようにファイル内にアクションフックが沢山用意されています。

do_action()の記述はその場所でfunctions.phpに登録されたアクションフックを呼び出すという関数で先にfunctions.phpにアクションフックとしてHTMLなどを登録しておきます。

function my_lightning_header_after(){ ?>
   <div class="text-center">do_action の書かれた場所に好きなようにHTMLを挿入できます</div>
<?php }
add_action( 'lightning_header_after', 'my_lightning_header_after' );

こうすることでlightning_header_afterのdo_action()の箇所で上記のHTMLが追加されます。

また、アクションフックの登録は必要になったら解除することも可能であるため、メンテナンス性からも良い点ということでテーマカスタムの際は上手に利用したいですね。

今回はこんな感じですね、

一度の案件でこれほどの気づきをいただけるとわ、、

実務は偉大ですね。

また、実案件などから得られたことを書いていこうと思います。

では。