themifyのカスタマイズする時の基本
備忘録的に、themifyのカスタマイズする時の基本。
wordpressのテーマにthemifyのテーマを利用する場合、導入までは簡単なのですが表示などいくつか手直ししたくなります。
その際肝心なのは、wordpressの更新やthemifyのテーマ・ビルダー機能の更新を行っても大丈夫なように手直しすることです。
なので基本テーマ本体のファイルをいじることはしないほうがいいと思います(アップデートの度に書き直さなきゃいけないから)。
themifyテーマのカスタマイズについては、custom-fanctions.phpと(※スペルミスしてました(誤)custom-fanctions.php→(正)custom-fanctions.php)とcustom_style.cssを使用テーマのディレクトリ直下(例えばbasicならtheme/basic/ここに設置)します。
custom_style.cssファイルは文字通りオリジナルで追加したcssを記入するのですが、これに関しては管理画面からcssを追加していく方法もあるのでやりやすい方を選ぶといいのかなと思います。
次にcustom-functions.phpですが、こちらのファイルで処理を追加することができます。
たとへば、ウィジェットを追加したり、日付の表示方法、条件分岐で別ファイルを読み込むなどなど。基本はhook(wordpressのhook)を指定して処理を追加していきます。
といってもよく利用するカスタマイズなどはちゃんとthemifyのdocsにもまとめてあります。
このcustom-functions.phpファイルを利用する注意点としては、自分の経験だと主に次の二つかなと思います。これがうまくいってないと管理画面での作業中『白い画面』が表示されることがあります(一応、管理画面トップに戻ったりはできるんですけど、まあこういった症状放置しながら使うのはありないですよね；)
1.各処理を一つずつ{}でくくる
下の例は一つ目はヘッダー下にバナーを配置、二つ目はコンテンツ部分の上にテキスト文字を配置する処理
<?php
function add_banner_header_end(){
echo '<div class="header-banner"><img src="#" alt="header banner" /></div>';
}
add_action('themify_header_end', 'add_banner_header_end');
?>
<?php
function add_welcome_message(){
if(is_home()) {
echo '<div class="welcome-text">Welcome message</div>';
}
};
add_action('themify_content_before', 'add_welcome_message');
?>
次がNGパターン<?php〜?>部分を一つにまとめている
<?php
function add_banner_header_end(){
echo '<div class="header-banner"><img src="#" alt="header banner" /></div>';
}
add_action('themify_header_end', 'add_banner_header_end');
function add_welcome_message(){
if(is_home()) {
echo '<div class="welcome-text">Welcome message</div>';
}
};
add_action('themify_content_before', 'add_welcome_message');
?>
2.{}の外に余分な空白(半角スペースも含む)を一切作らない
最後の処理の”?>”以下に余計な空白(半角スペース)や文字をいれない。また<?php〜?>(処理)と<?php〜?>処理のあいだにも改行するのは問題ないけど余計な半角スペースなどはいれない。
<?php
function add_welcome_message(){
if(is_home()) {
echo '<div class="welcome-text">Welcome message</div>';
}
};
add_action('themify_content_before', 'add_welcome_message');
?>→ここにはスペースも含めなにも入れない
ちなみにthemifyテーマでのhookの位置は以下のようなになっています。
<body>
<?php themify_body_start(); ?>
<div id="pagewrap">
<div id="headerwrap">
<?php themify_header_before(); ?>
<header id="header">
<?php themify_header_start(); ?>
<?php themify_header_end(); ?>
</header>
<?php themify_header_after(); ?>
</div>
<div id="body">
<?php themify_layout_before(); ?>
<div id="layout">
<?php themify_content_before(); ?>
<div id="content">
<?php themify_content_start(); ?>
<?php themify_post_before(); ?>
<article class="post">
<?php themify_post_start(); ?>
<?php themify_post_end(); ?>
</article>
<?php themify_post_after(); ?>
<?php themify_comment_before(); ?>
<div class="commentwrap">
<?php themify_comment_start(); ?>
<?php themify_commentform_before(); ?>
<div id="commentform">
<?php themify_commentform_start(); ?>
<?php themify_commentform_end(); ?>
</div>
<?php themify_commentform_after(); ?>
<?php themify_comment_end(); ?>
</div>
<?php themify_comment_after(); ?>
<?php themify_content_end(); ?>
</div>
<?php themify_content_after(); ?>
<?php themify_sidebar_before(); ?>
<div id="sidebar">
<?php themify_sidebar_start(); ?>
<?php themify_sidebar_end(); ?>
</div>
<?php themify_sidebar_after(); ?>
</div>
<?php themify_layout_after(); ?>
</div>
<div id="footerwrap">
<?php themify_footer_before(); ?>
<footer id="footer">
<?php themify_footer_start(); ?>
<?php themify_footer_end(); ?>
</footer>
<?php themify_footer_after(); ?>
</div>
</div>
<?php themify_body_end(); ?>
</body>
themifyのテーマをカスタマイズする際は『管理画面でできることはなるべく管理画面で』がけっこう大事だと思います。なので、管理画面からできるベーシックな機能・custom-functions.phpに記述すること・プラグインでやることを整理しとくといいですね。
ちなみにthemifyのテーマにはwoocommerceプラグインを使用することを前提にしたテーマもあるのですが、日本語での利用はなかなかハードルが高いです。言語ファイルを準備するのがベストなのですがけっこう労力いると思います; なのでeコマース向けのテーマに関してはまた別の機会にピックアップする予定です。
とりあえず今後ボチボチthemifyカスタマイズを備忘録的にアップしていく予定です。
使用テーマは無料で利用できるbasicにします。