Suiteカスタムフィールドカスタム投稿タイプチュートリアルTweetTweet今回の投稿は、松戸WordPress部の勉強会「カスタム三兄弟(応用編)画像ギャラリーを作ってみよう」のフォローアップです。レベル:初級から中級者になりたい人向けWordPressのメディア挿入のギャラリーを使えば、とっても簡単にギャラリーを投稿記事に掲載することができます。関連付けられた画像を思い通りに取得できるようになれば、自由にレイアウトしたり、Ajaxを利用してステキなギャラリーを設置できるようになります。今回はその第一歩です。今回の題材の設定:各地のシェアオフィスを紹介するカスタム投稿タイプを設置して、カスタムフィールドに登録された写真のギャラリーを詳細ページに設置するというものです。詳しい使用法は割愛します。以下の設定で、カスタム投稿タイプ「シェアオフィス(shareoffice)」を作成。Archive:trueその他はデフォルトで作成すると、管理メニューに「シェアオフィス」というカスタム投稿タイプのメニューが表示されているはずです。特定の同一カスタムフィールドをリピート(ループ)設置したいため、フリーで使えるCFSを使います。(ACFは有料で可能です。インストールして有効化すると、「フィールドグループ」というメニューができているはずです。フィールドグループを新規作成します。名前:cfimageフィールドタイプ:ファイルのアップロード返り値:添付ファイルID三つ目のフィールド:ラベル:キャプション名前:cfcaptionフィールドタイプ:単一行テキスト配置ルール/投稿タイプ:「等しい」を選択し、その右のフィールドで「shareoffice」を選択[更新]ボタンをクリックしてフィールドグループを保存します。すると次のような画面になるはずです。フィールド「ギャラリー」の下の青いボーダーに注目!フィールド「画像追加」の左にある下駄マークをドラッグして「ギャラリー」の下にうまくドロップすると次のように「ギャラリー」の下に「画像追加」「キャプション」を階層化できます。この状態で保存して、「シェアオフィス」の新規追加ページを開いてみてください。すると、カスタムフィールドが[コンテンツエディタ]の下に表示されているはずです。[ギャラリーを追加]ボタンをクリックすると、複数の画像セットを追加していくことができます。(ループもしくはリピート)フロントエンドに表示する新規「シェアオフィス」で、「コンテンツエディタ」、「ギャラリー」CFに画像を5~6枚など、適当に登録して[公開]します。画像は表示できていませんタイトルバー下の[シェアオフィスを表示]をクリックしてさっそく記事を表示してみます。タイトルとコンテンツエディターの内容は正しく表示されているものの、画像は表示されていません。CFの値を取得して表示するコードを書き込んでいかなければならないからです。有効にしていると、上部アドミンバーに現在の表示に使っているテンプレートファイルが表示されているはずです。メインになっていることでしょう。読み込んでいるはずです。読み込むという条件にすることにします。いう関数を見つけてください。これは、コンテンツエディタの記述を出力するための関数です。この下に、コードを挿入します。'</pre>';?>これで、ページを見ると、CFの値を取得できていることを確認することができます。使用するプラグインによって値の取得方法は異なります。'</pre>';?>プラグインの関数を使うならフィールドグループごとに下層の値も取得できるのに対して、後者のWordPressの関数を使う場合は下層のCFごとに値を取得することになります。プラグインの関数があるならそちらのほうが簡単そうですね。?>コード例1とコード例2を並べてみると、たいした違いはないですね。好みというところでしょうか。text-align:center;}こんなイメージになります。自由自在にオリジナルギャラリーを設置するカスタムフィールドの設置の仕方、値の取得方法などについて理解すると、ギャラリー(だけではない)を自由自在に設置できるようになります。ここではJqueryで実装した完全オリジナルの例を紹介します。(下記コードとは別にJqueryを読み込んでおく必要があります。