この内容は Takumi Hirashima Artworks の http://hirashimatakumi.com/blog/7.html コピーです。

WordPress のプラグイン Advanced custom field の表示方法を紹介します。
Advanced custom field(以下ACF)は WordPress で柔軟なカスタムフィールドを制作できる便利なプラグインです。
この投稿では、基本的な表示方法から取得の際の注意点や、表示されない時の対処方法などを紹介していきます。

1.基本的な表示方法と注意点

まずはACFの基本的な表示方法と表示されない時の対処方法や注意点などを紹介します。

投稿のフィールド値の取得と表示方法

投稿に入力されているフィールド値を表示する場合は the_field() を使用します。

<?php the_field('text_field'); ?>

フィールド名を変更する場合は the_field('text_field') 内のフィールド名 text_field を変更します。
フィールド値を取得したい場合は get_field() を使用します。

<?php $text_field = get_field('text_field'); ?>
取得した値を表示したいときは echo を使います。
<?php echo $text_field; ?>

別の投稿のフィールド値を表示

別の投稿のフィールド値を取得する場合は フィールド名の後にポストIDを指定することでフィールド値を取得できます。
例えば、特定の固定ページに入力されているフィールド値を表示したい場合は、フィールド名の指定の後に該当ページのページIDを指定します。
次コードは、ページIDが 123 の場合の表示方法です。

<?php the_field('text_field',123); ?>

現在表示しているページの親ページIDを取得するには WordPress 直上の親ページのIDやスラッグを取得をご覧ください。

オプションページからフィールド値を取得

ACF のアドオン Options Page(オプションページ)を使ってフィールド値を取得して表示する場合は、フィールド名の後に option を追加します。

<?php the_field('text_field','option'); ?>

または

<?php the_field('text_field','options'); ?>

ACF のアドオンオプションページを使用する場合は option または options を追加します。
オプションページから値の取得がうまくいかない場合はこの項目を確認しましょう。
オプションページの詳しい表示方法は、Advanced Custom Feld のアドオン Options Page の表示方法をご覧ください。

条件分岐を使った表示方法

条件分岐を使った表示方法を紹介します。
次のコードは、if 構文を使った場合の表示方法です。

<?php if(get_field('text_field')): ?>
<?php the_field('text_field'); ?>
<?php endif; ?>

if 構文の時には代入演算子を使うと便利です。
代入演算子を使う場合は必ず get_field() を使います。

<?php $text = get_field('text'); if( $text ): ?>
<?php echo $text; ?>
<?php endif; ?>

if 構文をシンプルにするなら次のような方法もあります。

<?php $text = get_field('text_field'); if( $text ){ echo $text; }?>

Repeater Field のフィールド値を表示

ACF の有料アドオン Repeater Field(リピーターフィールド)を使う場合は the_sub_field() を使います。
Repeater Field の詳細は、Advanced Custom Feld のアドオン Repeater Field の表示方法をご覧ください。

<?php the_sub_field('sub_field_name'); ?>

代入演算子を使う場合は get_sub_field() を使います。

<?php $sub_field_name = get_sub_field('sub_field_name'); ?>

リピーターフィールドの取得がうまくいかない場合は the_sub_field()get_sub_field() になっていることを確認しましょう。

注意点

ACF を使う上での注意点をリストアップしました。
フィールド値が表示されない場合は次の点を確認してみましょう。

  • the_fieldget_field の使い所を間違えている
  • リピーターフィールドの表示で the_fieldthe_sub_field の使い所を間違えている
  • オプションフィールドの表示で option を書き忘れてしまう
  • そもそも指定しているフィールド名が合っていない
  • 画像オブジェクトの返り値の指定が表示の指定と合っていない

などなど

リピーターフィールドや柔軟コンテンツ内で、フィールド値を取得や表示する場合は the_sub_field になります。
これを間違えて「あぁ、表示されない!」ってことがよくあるので気をつけましょう。
次は実践的な表示方法をを紹介していきます。

2.テキストフ​​ィールドの表示

フィールドタイプ「テキスト」「テキストエリア」「数値」「メール」「パスワード」の表示方法を紹介します。
このフィールドタイプは単一の文字列値を格納するのに適しています。

<?php the_field('text'); ?>

3.画像フィールドの表示

画像フィールドの表示方法を紹介します。
テキストフィールドと同じくらい頻繁に使うのが画像フィールドです。
フィールドの表示と取得方法が何通りかあるので、使用する場面を見て使い分けていきましょう。

画像の表示(返り値:オブジェクト)

<?php $image = get_field('image'); if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>

画像の登録が絶対にあるならシンプルにこんな書き方もできます。

<img src="<?php $image = get_field('image'); echo $image['sizes']['medium']; ?>" />

画像の URL やタイトルなどを個別に取り出す場合はこちら。

<?php
$image = get_field('image');
if( !empty($image) ):
// 画像から各種値を取り出す
$url = $image['url']; // URL
$title = $image['title']; // タイトル
$alt = $image['alt']; // 代替テキスト
$caption = $image['caption']; // キャプション
$description = $image['description']; // 説明
// thumbnail
$size = 'thumbnail'; // 画像サイズ thumbnail(サムネイル), medium(中サイズ), large(大サイズ), full(元画像)
$thumb = $image['sizes'][ $size ];
$width = $image['sizes'][ $size . '-width' ]; // 横幅
$height = $image['sizes'][ $size . '-height' ]; // 高さ
?>
<a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
</a>
<p>
<?php echo $caption; ?>
<?php echo $description; ?>
</p>
<?php endif; ?>

画像の表示(返り値:URL)

次のコードは、画像の返り値がURLの場合の表示方法です。

<?php if( get_field('image') ): ?>
<img src="<?php the_field('image'); ?>" />
<?php endif; ?>

画像の表示(返り値:ID)

次のコードは、画像の返り値がIDの場合の表示方法です。

<?php
$image = get_field('image');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size );
}
?>

画像の登録が絶対にあるならシンプルにこんな書き方もできます。

<?php echo wp_get_attachment_image(the_field('image'),'large'); ?>

4.チェックボックス・ラジオボタンフィールドの表示

チェックボックスフィールドとラジオボタンフィールドの表示方法を紹介します。

値が一つの場合

チェックボックスフィールドとラジオボタンフィールドで値が一つの場合の表示方法を紹介します。
次のコードは、フィールド名が colors 登録している値とラベルが red:赤 の場合に値 red を表示します。

<?php the_field('colors'); ?>

値が複数の場合

チェックボックスフィールドで登録した値が複数の場合の表示方法です。
次のコードは、フィールド名が colors 登録している値とラベルが red:赤 blue:青 green:緑 の場合に red,blue,green, を表示します。

<?php
$colors = get_field('colors'); // 値の代入
if( $colors ){
echo implode(', ', $colors); // 配列要素を文字列「, 」で連結して表示
}
?>

値をタグなどで囲む場合は次のような方法があります。
次のコードは、フィールド名が colors の場合に項目をリストにして表示する方法です。

<?php $field = get_field('colors'); if ($field): ?>
<ul>
<?php foreach( $field as $value ): ?>
<li>
<?php echo $value; ?>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>

条件付きで表示する場合

チェックボックスフィールドとラジオボタンフィールドで値を条件付きで表示する方法を紹介します。
フィールド名が colors 登録している値が red:赤 の登録があるかどうかを判別して表示する方法です。

<?php if(get_field('colors') == 'red') { echo 'red'; } ?>

ラベルを取得する場合

ラジオボタンフィールドでラベルを取得して表示する方法を紹介します。
次のコードは、フィールド名が colors 登録している値とラベルが red:赤 の場合にラベル赤を表示します。

<?php
$field = get_field_object('colors');
$value = $field['value'];
$label = $field['choices'][ $value ]; // ラベルを取得
echo $label; // ラベルを表示
?>

チェックボックスフィールドでラベルを取得して表示する方法を紹介します。
次のコードは、フィールド名が colors 登録している値が red:赤 の場合にラベル(赤)を表示します。

<?php
$field = get_field_object('colors');
$colors = $field['value'];
if( $colors ){
foreach( $colors as $color ){
echo $field['choices'][ $color ];
}
}
?>

5.セレクタフィールドの表示

セレクタフィールドの表示方法を紹介します。
セレクターフィールドはチェックボックスとラジオボタンに似た表示方法になります。

値が一つの場合

セレクターフィールドで値が一つ場合の表示方法を紹介します。
次のコードは、フィールド名が colors 登録している値とラベルが red:赤 の場合に red を表示します。

<?php the_field('colors'); ?>

値が複数の場合

セレクターフィールドで登録した値が複数の場合の表示方法です。
次のコードは、フィールド名が colors 登録している値とラベルが red:赤 blue:青 green:緑 の場合に red,blue,green, を表示します。

<?php
$colors = get_field('colors'); // 値の代入
if( $colors ){
echo implode(', ', $colors); // 配列要素を文字列「, 」で連結して表示
}
?>

条件付きで表示する場合

セレクターフィールドで値を条件付きで表示する方法を紹介します。
フィールド名が colors 登録している値が red:赤 の登録があるかどうかを判別して表示する方法です。


<?php if(get_field('colors') == 'red') { echo 'red'; } ?>

次のコードは、値が複数の場合の表示方法です。

<?php
if(in_array('red', get_field('colors'))) {
echo '選択したのは red です';
} elseif(in_array('blue', get_field('colors'))) {
echo '選択したのは blue です';
}
?>

ラベルを取得する場合

セレクトフィールドのラベルを取得して表示する方法を紹介します。
次のコードは、フィールド名が colors 登録している値とラベルが red:赤 の場合にラベル赤を表示します。

<?php
$field = get_field_object('colors');
$value = $field['value'];
$label = $field['choices'][ $value ]; // ラベルの取得
echo $label; // ラベルを表示
?>

6.投稿オブジェクトの表示

投稿オブジェクトを表示する方法を紹介します。

投稿オブジェクトが一つの場合

次のコードは、フィールド名が post_objects の場合に、投稿のタイトル・リンク・アイキャッチ画像を表示します。

<?php $post_objects = get_field('post_objects'); if( $post_objects ): // 投稿オブジェクトの取得 ?>
<a href="<?php echo get_permalink($post_objects->ID); // ID指定でリンクを取得 ?>">
<?php if ( has_post_thumbnail($post_objects->ID)): //アイキャッチ画像があれば ?>
<?php //アイキャッチ画像の取得
$thumbnail_id = get_post_thumbnail_id($post_objects->ID); // アタッチメントIDの取得
$image = wp_get_attachment_image_src($thumbnail_id,'full'); //「full」サイズのアイキャッチの情報を取得
$src = $image[0];    // URL
$width = $image[1];  // 横幅
$height = $image[2]; // 高さ
echo '<img src="'.$src.'" width="'.$width.'" height="'.$height.'" />';
?>
<?php else: //画像がない場合 ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/nowprinting.png" alt="nowprinting" />
<?php endif; ?>
<?php echo get_the_title($post_objects->ID); //タイトルの取得 ?>
</a>
<?php endif; ?>

投稿オブジェクトが複数の場合(グローバル変数へセットする場合)

グローバル変数へセットすることで、通常の投稿と同じような関数で値を取得することができます。
ここで重要なのは、グローバル変数へセットした時は必ずポストオブジェクトをリセットすることです。
ここでポストオブジェックトをリセットしないと、ページの残りの部分が正常に動作しない場合があります。

<?php $acf_post_objects = get_field('post_objects'); if( $acf_post_objects ): ?>
<ul>
<?php foreach( $acf_post_objects as $post): // ループの開始 ?>
<?php setup_postdata($post); // 重要! setup_postdata でポストオブジェクトを呼び出します ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<span>カスタムフィールド<?php the_field('field_name'); ?></span>
</li>
<?php endforeach; // ループの終了 ?>
</ul>
<?php wp_reset_postdata(); // ページの残りの部分は正常に動作するように、ポストオブジェクトをリセットします ?>
<?php endif; ?>

投稿オブジェクトが複数の場合(グローバル変数へセットしない場合)

グローバル変数へセットしない場合は投稿IDから各種値を取得します。

<?php $acf_post_objects = get_field('post_objects'); if( $acf_post_objects ): ?>
<ul>
<?php foreach( $acf_post_objects as $acf_post_object): // ループの開始 ?>
<li>
<a href="<?php echo get_permalink($acf_post_object->ID); ?>"><?php echo get_the_title($acf_post_object->ID); ?></a>
<span>カスタムフィールド:<?php the_field('field_name', $acf_post_object->ID); ?></span>
</li>
<?php endforeach; // ループの終了 ?>
</ul>
<?php endif;?>

7.デイトピッカーの表示

デイトピッカーフィールド(日付)の表示方法を紹介します。

基本の表示

次のコードは、フィールド名が date の場合の表示方法です。

<?php the_field('date'); ?>

高度な表示

表示される日付の値をカスタマイズしたい場合は、次のように調整することが可能です。
次のコードは YYYYMMDD の形式で保存された生の値を取得し、それを修正するために数値を変換する方法です。

<?php
$date = get_field('date', false, false); //値の取得
$date = new DateTime($date); //日付オブジェクトの作成
echo $date->format('j M Y'); //日付の表示
?>

その他

その他に、直接日本語表記に変更したい場合は、管理画面で以下のフィールドの設定を任意で変更してみましょう。

Display Format
表示フォーマット
管理画面に表示されるときの日付形式を入力します。年月日を入れて値を返したい場合は「yy年m月d日」とするのがよいでしょう。
Return format
フォーマットを保存する
表示される値の日付形式を入力します。値は常にDBでYYYYMMDDとして保存されることに注意してください。年月日を入れて値を返したい場合は「yy年m月d日」とするのがよいでしょう。
Week Starts On
週の開始
週を開始する曜日を指定します
最近のWordPress案件でプラグイン

最近のWordPress案件でプラグイン

Advanced Custom Fields Customise WordPress with powerful, professional and intuitive fields

Breadcrumb NavXT 訪問者に対し現在地へのパスを表示する「パンくずリスト」ナビゲーションをサイトに追加します。

Bulk Registration Terms タームを一括登録します。

Category Order and Taxonomy Terms Order Category Order and Taxonomy Terms Order

Duplicator Create a backup of your WordPress files and database. Duplicate and move an entire site from one location to another in a few steps. Create a full snapshot of your site at any point in time.

Password Protected  認証

Post Expirator 日付で下げたり上げたり

PS Taxonomy Expander PS Taxonomy Expanderは、カテゴリー・タグ、そしてカスタム分類の記事編集時における使い勝手を向上させます。

Search & Filter Pro    サーチ系

SiteGuard WP Plugin SiteGuard WP Pluginは、WordPressにインストールするだけで、セキュリティを向上させることができます。SiteGurad WP Pluginは、管理ページとログインに関する攻撃からの防御に特化したセキュリティプラグインです。WAF ( SiteGuard Lite )の除外ルールを作成する機能もあります。( 使用するにはWAFがWebサーバーにインストールされている必要があります )

WordPress HTTPS WordPress HTTPS is intended to be an all-in-one solution to using SSL on WordPress sites.

WP Lightbox 2

WP Media folder

Wp Pagenavi

Wp Pagenavi Style

リディレクション

Exec-PHP 記事やウィジェット内でPHPを使えるようにする



最近使ってよかったプラグイン

最近使ってよかったプラグイン

Bulk Registration Terms
タームを一括登録します。
都道府県を複数のカスタム投稿で設定する必要があった時、すごい便利だった。

Post Expirator
掲載日時指定 取り下げ日時も指定

PS Taxonomy Expander
管理画面でつかんで記事の並べ替え

WP Media folder
メディアの中をフォルダ分け
※有料

Duplicator
まるごとバックアップ

ああプラグインすげえ便利

Welcartの商品検索を or じゃなくて and にする

AND検索がデフォなんだけどOR検索いしたい、どうしても。

自分のテーマにコピーした usc-e-shop>templates>wc_search_page.php

$search_query = array(‘category__and’ => $catresult, ‘posts_per_page’ => 10, ‘paged’ => $uscpaged);

これを

$search_query = array(‘category__in’ => $catresult, ‘posts_per_page’ => 10, ‘paged’ => $uscpaged);

こう

ここを参考にした。

WebDesignRoom

Event Organiserのカスタム☆

Event Organiserのカスタム☆

最近、ブックマークなんかしていたページが、次に見に行くともうないってことが多かったので自分のブログにもメモさせてもらいたいと思います。
元は こちらです。
webooooo 様

Event Organiser ワードプレスでイベントサイトを作れるプラグイン


Event Organiser ワードプレスでイベントサイトを作れるプラグイン

Event Organiser

ワードプレスでイベントサイトを作る場合、「Event Organiser」というプラグインがおすすめです。

このプラグインの備忘録を公開します。

カスタマイズするファイルは以下のファイルです。

イベントアーカイブ: archive-event.php
イベントページ: single-event.php
会場ページ: taxonomy-event-venue.php
イベントカテゴリページ: taxonomy-event-category.php

テーマカスタマイズ↑ 対象のファイルをテーマフォルダ直下に入れるとOK

——————————————————————————-
ショートコードのカスタマイズ
shortcode-event-list.php を テーマフォルダ直下に入れるとOK

ヘルプ
http://docs.wp-event-organiser.com/shortcodes/

更新ルール

◆複数日にわたり、イベントがある場合
・開始日と終了日は同じ日付にする
・繰り返し:カスタム
・繰り返し追加/削除 日付を表示 で複数日選択すること

◆エラーと思った現象 カテゴリーをクリックしてから一覧が表示されなくなった
設定→「過去のイベントを表示する」のチェックが外れていた

◆ファイル構造
カレンダーの日付押した時のデザイン
archive-event.php

◆ショートコード(本文中に指定)
カレンダーを表示
[eo_calendar]

イベント一覧を表示
[eo_events event_start_before=”now”]

今月のイベントを表示
[eo_events event_start_after=”first day of this month” event_end_before=”last day of this month”]

先月のイベントを表示
[eo_events event_start_after=”first day of -1 month” event_end_before=”last day of -1 month”]

◆eo_eventsの使い方
[eo_events numberposts=5]  イベントを5件表示
[eo_events event_start_before=”引数”] 引数より前の開始イベントを表示 (過去)
[eo_events event_start_after=”引数”] 引数より後の開始イベントを表示(未来)
[eo_events event_end_before=”引数”] 引数より前の終了イベントを表示 (過去)
[eo_events event_end_after=”引数”] 引数より後の終了イベントを表示(未来)
[eo_events ondate=””] 特定日に開始するイベントを表示 

◆引き数
tomorrow
today
now
+1 week
+2 week
+1 month
third Thursday of this month
last Monday
first day of this month
last day of this month

◆PHP 変数のデータの型を調べる

◆イベントカテゴリーページの 昇順と降順
event-organiser-archives.php
538行

ASC⇒DESC

ORDER BY 列名 ASC  指定した項目を昇順でソートする
ORDER BY 列名 DESC 指定した項目を降順でソートする

昇順: JISコード順に従って並べ替える
数値:1→9
アルファベット:A→Z
かな:あ→ん
日付:古い順

降順: JISコードの逆順に並べ替える
数値:9→1
アルファベット:Z→A
かな:ん→あ
日付:新しい順

Duplicator を使って 本番環境のコピーをローカル(ISWP)に作る

Duplicator を使って 本番環境のコピーをローカル(ISWP)に作る

お客様で運用開始してしばらくして、wordpressの修正が必要になったので最新のコピーをローカルに作りました。
楽しようとしてプラグインのDuplicatorを使いたいのに、ISWPのローカルで実行すると接続できないと出て進めなくなった。
簡単なことで実行できるようになったのだけど、忘れてしまうので書いておこう。

1、本番(さくらサーバー)にプラグインの「Duplicator」をインストール 有効化してパッケージを作ってそいつを開発用USBメモリの中のwordpressのルートに静かに入れる。
文字列.zipとinstaller.phpの二つ。

2、ISWPを起動して、http://127.0.0.1:4001/wordpress/installer.php にアクセス。
ホスト localhost
名前 wordpress
ユーザ root
パスワード 空

Server=localhost; Database=wordpress1; Uid=root; Pwd=; Port=3306
インスタントワードプレスだと、接続テストのところでこける
ポート3306のどうのこうのと出る。

その時はpms_config.iniをなおす必要がある。
ドライブ名:InstantWP_4.3iwpserverpms_config.ini
MySQLPort=7188 ところを、 MySQLPort=3306 に変更する

変えたら、INSTANT WORDPRESSを一度閉じて再起動しないと反映されない。
これでできているはず。
これでローカル<-->本番 の行ったり来たりが楽にできるようなりました。

WordPressからTwitterの連携はNextScripts: Social Networks Auto-Posterが良い

WordPressからTwitterの連携はNextScripts: Social Networks Auto-Posterが良い

wordpressに投稿したら自動でtwitterにも投稿したく、WP to Twitter と WordPress Popular Posts を試してみたんだけど、
今回使ってみたNextScripts: Social Networks Auto-Posterを使ってみたらとても良かった。

記事内の画像がツイートに埋め込んだ(表示されてる)状態でポスとされるから!
しかも設定もとくに変える箇所がなく、英語だけどなんとなくで進んでいけた。

SI CAPTCHA Anti-Spamが急にUnreadable CAPTCHA token fileってエラー

SI CAPTCHA Anti-Spamが急にUnreadable CAPTCHA token fileってエラー

このブログに入れている SI CAPTCHA Anti-Spam というプラグインがへんになった。 おとといまでふつーにログインできていたのに、昨日はじかれて。で、昨日は忙しくなってしまったので再度今日ログインを試すと 「Unreadable CAPTCHA token file」とでてログインできない。

ログインIDもパスワードも変えていない。試しにiphoneのブログ投稿アプリから投稿したらできた。 やっぱりIDもパスも変わっていないなぁ。

これはキャプチャがおかしいと思って、FTPでpluginフォルダに入って、si-captcha-for-wordpress を 適当にリネームした。 それで再度ログインしてみたらできた。 やっぱりキャプチャがへんみたい。

それでUnreadable CAPTCHA token fileをググったら解決方法があった

スパム対策

wp-content/plugins/si-capcha-for-wordpress/captchaの下にある、cache のパーミッションを777に変更すると治るらしい。

でも結局自分の場合はこれでは治らなかった。

ダメになった原因はおそらく2~3日前にプラグインを入れたからだ。

入れたのは管理画面のアクセスを確認できるプラグイン「Crazy Bone」と
ログイン試行回数を制限する「Limit Login Attempts」だった。
他に「PS Disable Auto Formatting」も入れたけどこれは関係なさそう。

「Crazy Bone」と「Limit Login Attempts」が怪しい。
ログイン試行回数を制限するLimit Login Attemptsでログイン試行回数を短く設定しておくことでキャプチャは諦めることで納得した。

mmm…

WP jQuery Lightbox カスタムテーマでうごかないじゃん?って時

WP jQuery Lightbox カスタムテーマでうごかないじゃん?って時

WP jQuery Lightbox を自作テーマに入れたら動かない。
「インストールして有効にするだけでOK」みたいな記事を見て入れてみたんだけど

なんでかなーーーーっ って思って設定ページを見てたら


いつもwp_header();  を

</head>

のすぐ前に置け
wp_footer();もの

</body>

とじ前に置くんだ

のような感じの文章があったので自作テーマでそこを直したら、チャンと動きました。
英語ってだけで説明を読む気持ちがなくなるんだよねぇ。