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.各処理を一つずつ{}でくくる

下の例は一つ目はヘッダー下にバナーを配置、二つ目はコンテンツ部分の上にテキスト文字を配置する処理

次がNGパターン<?php〜?>部分を一つにまとめている

 

2.{}の外に余分な空白(半角スペースも含む)を一切作らない

最後の処理の”?>”以下に余計な空白(半角スペース)や文字をいれない。また<?php〜?>(処理)と<?php〜?>処理のあいだにも改行するのは問題ないけど余計な半角スペースなどはいれない。

ちなみにthemifyテーマでのhookの位置は以下のようなになっています。

themifyのテーマをカスタマイズする際は『管理画面でできることはなるべく管理画面で』がけっこう大事だと思います。なので、管理画面からできるベーシックな機能・custom-functions.phpに記述すること・プラグインでやることを整理しとくといいですね。

ちなみにthemifyのテーマにはwoocommerceプラグインを使用することを前提にしたテーマもあるのですが、日本語での利用はなかなかハードルが高いです。言語ファイルを準備するのがベストなのですがけっこう労力いると思います; なのでeコマース向けのテーマに関してはまた別の機会にピックアップする予定です。

とりあえず今後ボチボチthemifyカスタマイズを備忘録的にアップしていく予定です。

使用テーマは無料で利用できるbasicにします。

 Themify – Basic