ビルダー＆ショートコードメモ

投稿日 2013/11/15

Themify ビルダーとショートコードの簡単なメモ。

ビルダーよりショートコードの方が便利そうなんだよなぁ。

フロントエンドからの操作
編集画面からの操作
使わないモジュールの除外
カスタム時の注意点
（2017/12/13 追記）ビルダー使用時の注意点
ショートコード

フロントエンドからの操作

管理バーにメニューが追加されているので、「Turn On Builder」を選択すると、ビルダーモードになる。

※ 画像は日本語化してある状態です。

ビルダーモード時は画面下部にモジュールが並んでいるので

上部の「drop module here」と書かれた部分に任意のモジュールをドラッグ＆ドロップして配置する。

以前は右側のつまみをドラッグすることで1～4列の間で列の変更が可能だったけど、

今は「|||」みたいなアイコンからレイアウトを選ぶようになっている。

タイトルバーをドラッグすることで位置の移動が可能。左上の「≡」みたいなアイコンはメニュー。右上の三角アイコンは折りたたみ。

最後に「保存」を押すのを忘れないこと。

モジュールを追加できるのは記事の下の独自のエリアだけで、記事本文内への埋め込みはできない。

編集画面からの操作

「Themify Custom Panel」メタボックスが追加されているので、「Themify Builder」タブを選択し、下部の「drop module here」と書かれた部分に任意のモジュールをドラッグ＆ドロップして配置する。

操作方法はフロントエンドと同様。

モジュールを追加できるのはフロントエンド同様記事の下の独自のエリアだけ。

使わないモジュールの除外

設定画面の Settings → Themify Builder から「Exclude ○○ module」にチェックを入れると、そのモジュールが一覧に出てこなくなる。

Slider、Highlight、Portfolio、Testimonial に関しては専用のカスタム投稿タイプが存在し、管理画面のサイドメニューを圧迫する。それらが不要な場合も上記画面でチェックを入れて保存することで消せる。

カスタム時の注意点

以前は「custom_style.css」よりも「themify-builder-style.css」の方が後に読み込まれるクソ仕様だったので、「custom_style.css」を使う場合はセレクタの詳細度を上げたり !important をつけたりして優先度を上げるか、そうでなければ設定画面の「Style」→「Custom CSS」に記述する（一番下に足されるので）必要があった。

現時点（1.5.1）では custom_style.css の方が後に読み込まれるようになっている。

（2017/12/13 追記）ビルダー使用時の注意点

2017/12/13 時点（Themify Basic 1.8.4, Themify 3.3.8）の、ビルダー使用時の注意点。

一覧表示時、本文の  を無視して抜粋文の下部に強制的に表示される。
- CSSでうまいこと消すしかない。
Jetpack の markdown 機能使用時、markdown で本文を書いて保存すると、HTMLに変換された状態で復元されてしまう。
- markdown機能は以下のように動く。
  - 保存時は wp_posts テーブルの post_content にHTML変換後の本文を、post_content_filtered に変換前の（markdown状態の）本文を格納する。
  - 編集画面表示時は本文欄に post_content_filtered の内容を読み込む。
- ところがThemifyビルダーを使用するとpost_content、post_content_filtered の両方にHTML変換後の本文を設定してしまうため、markdownで書いた文章が失われる。

というわけで、「 を使っている人」「Jetpack の markdown 機能を使っている人」はビルダーを使うことができない！

不便すぎ。

ショートコード

ビルダーモジュールとは区別されていて、ラインナップもビルダーモジュールとは異なる。設定画面でモジュールやビルダーを無効にしてもショートコードは使用できる。

（2019/5/14 追記）いつの間にか非推奨になってた

なんか、Themifyフレームワーク3.1.3の時点で非推奨になったらしい。ショートコードの記述方法もいつの間にか変わってた。

参考：Themify Shortcodes • Themify

Themify Shortcodesプラグインを入れれば（Themify以外のテーマを使用していても）使えるようになるので使う場合はこれを入れよう。

使い方

記事中に埋め込めるのが大きな違い。

ビジュアルエディタを使用している場合はツールバーにアイコンが追加され、そこから選択できるようになる。

ツールバーから選択するのではなくショートコードを手打ちで入れてももちろん動く。

詳しくは公式サイトのドキュメントを参照。

Box（ショートコード）のカスタマイズ

公式サイトに指定可能なスタイル一覧が示されているが、「独自の色を追加したい」「アイコンを変えたい」などカスタマイズしたい場合、基本的には CSS の追加だけを行えばよい（style 属性に追加した文字列はそっくりそのまま CSS クラスとして追加されるだけなので）。

（例）

/* 色「white」追加 */
.shortcode.box.white {
    background: #ffffff;
    border-color: #dddddd;
}
/* アイコン「download」の画像を変更 */
.shortcode.box.download {
    background-image: url(./img/download.png);
}
/* アイコン「abetakakazu」追加 */
.shortcode.box.abetakakazu {
    background-image: url(./img/uho.png);
    background-repeat: no-repeat;
    background-position: 8px 5px;
    padding-left: 60px;
    min-height: 45px;
}

/* 色「white」追加 */

.shortcode.box.white {

background: #ffffff;

border-color: #dddddd;

}

/* アイコン「download」の画像を変更 */

.shortcode.box.download {

background-image: url(./img/download.png);

}

/* アイコン「abetakakazu」追加 */

.shortcode.box.abetakakazu {

background-image: url(./img/uho.png);

background-repeat: no-repeat;

background-position: 8px 5px;

padding-left: 60px;

min-height: 45px;

}

元ネタのスタイルは テーマ名/themify/css/themify.framework.css を参照。