Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
第18回WordBench羽田ーカスタムフィールドを活用しよう
ryuh_a
March 26, 2018
Technology
0
230
第18回WordBench羽田ーカスタムフィールドを活用しよう
LT資料
開催日:2018年3月25日
ryuh_a
March 26, 2018
Tweet
Share
More Decks by ryuh_a
See All by ryuh_a
Wordpressのセキュリティーについて考える
ryuh_a
0
140
Other Decks in Technology
See All in Technology
⚡Lightdashを試してみた
k_data_analyst
0
190
エンジニアと気軽に繋がれるプラットフォーム「ハッカー飯」で行った セキュリティ・モニタリングに関する取り組みについて
nobuakikikuchi
0
350
Who owns the Service Level?
chaspy
5
840
Oracle Database Technology Night #55 Oracle Autonomous Database 再入門
oracle4engineer
PRO
1
120
YAMLを書くだけで構築できる分散ストレージ
sat
PRO
0
170
OSINT/GEOINT ワークショップ 20220514 古橋資料
furuhashilab
2
290
目と耳を持った自然言語処理 - スタートアップにおける価値創出のために
yag_ays
PRO
0
530
Research Paper Introduction #98 "NSDI 2022 recap"
cafenero_777
0
200
Babylon.js v5 新機能の紹介
limes2018
1
1.1k
失敗を経験したあなたへ〜建設的なインシデントの振り返りを行うために実践するべきこと〜
nobuakikikuchi
0
110
Microsoft 365の中でのPower BIの利用 / M365VM2022
ishiayaya
0
1.5k
20220510_簡単にできるコスト異常検出(Cost Anomaly Detection) /jaws-ug-asa-cost-anomaly-detection-20220510
emiki
2
310
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
3
430
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
125
8.5k
What’s in a name? Adding method to the madness
productmarketing
11
1.5k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
The Language of Interfaces
destraynor
148
20k
The Illustrated Children's Guide to Kubernetes
chrisshort
14
34k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Building Applications with DynamoDB
mza
83
4.6k
Design by the Numbers
sachag
271
17k
Making Projects Easy
brettharned
98
4.3k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Designing Experiences People Love
moore
130
22k
Transcript
第18回WordBench羽田 カスタムフィールドを活用しよう。 (補足追記版) Ryu
自己紹介 • ペットショップさくら 子犬の仲介販売サイトを運営しています。 http://pet-shop-sakura.com/ 動物取扱業登録 【販売】川崎市24幸販第1号 【保管】川崎市24幸保第1号 • 40代のおっさんです。
得意分野・趣味など • ネットワーク系(IPルーティング、VPNなど) • 機械いじり(事務機器など) • 犬猫の飼育指導 • 一眼レフ(Canon EOS
KISS X7i) • WordPress(勉強中) • Ruby on Rails(勉強を始めた超初心者) • ロードバイク
カスタムフィールドって何? WordPress Codex 「カスタムフィールドの使い方」によると WordPress には、投稿者が投稿に「カスタムフィールド」を追加できる機能がありま す。この任意の情報は「メタデータ」と呼ばれており・・・ http://wpdocs.osdn.jp/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%95%E3% 82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AE%E4%BD%BF%E3%81%84%E6%96% B9
つまり 任意の情報をメタデータとして、投稿に追加できる機能です。
何に使えるの? アイデア次第でいろいろなことに使えるかもしれません。 入力する場所が投稿記事と別れている為、記事を再編集するような場合(特に再編 集することがあらかじめわかっているような場合※1)に変更箇所を探す必要がなくな ります。 ※1:Example • ECサイトなどの商品のページで、ステータスが“販売中”→“売約済み”となるよう なもの •
ユーザーに対して入力箇所を制限したいような場合
例えば • サブループを使用して、複数の場所でデータを使用する • フラグをたてて、ステータスの変更をする • 固定ページ、投稿内で使用する • 他のプラグイン(Ex.Contact Form
7)と連携する ・・・・など
使い方(登録方法1)
使い方(登録方法2)
使い方(登録方法3) 新規追加より 名前 : helloworld 値 : 任意の値(例えば、 WordPressの世界にようこそ!)
使い方(値取得方法) カスタームフィールドに登録した値を取得する方法は、以下のようなものがあります。 1. ショートコードによる取得 2. WordPressのテンプレートファイルを編集する get_post_meta($post_id, $key, $single); 3.
プラグインを使用する 例):Advanced Custom Fields
使い方(値取得:ショートコード1) テーマ(※1)functions.phpに以下のようなショートコードを記述する。 function getHelloworld(){ $helloworld = esc_html( get_post_meta( get_the_ID(), ‘helloworld',
true ) ); return $helloworld; } add_shortcode('viewHelloworld', 'getHelloworld'); ※1 functions.phpはテーマを更新すると上書きされますので、子テーマを作成するな ど対策が必要です。
使い方(値取得:ショートコード2) 投稿記事に以下のショートコードを追加して、公開すると、カスタムフィールドに登録 した値が表示されると思います。 [viewHelloworld]
使い方(値取得:テンプレートファイル編集) テンプレートファイル内でカスタムフィールドの値を取得する場合、以下の関数を利用 します。 get_post_meta($post_id, $key, $single); ※ループ内で使用すること ※詳細はWordPress Codex 日本語版をご参照ください。
http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3% 83%AC%E3%83%B3%E3%82%B9/get_post_meta
使い方(値取得:テンプレートファイル編集1-1) カスタムフィールドに登録したURLを使いリンクボタンを追加する
使い方(値取得:テンプレートファイル編集1-2) <ブラウザで表示した場合>
使い方(値取得:テンプレートファイル編集1-3) < Source code > <?php // IFでカスタムフィールドに値が入っている場合のみHTMLタグを追加 if( get_post_meta(
$post->ID, 'puppy-db-url', true ) ): ?> <!-- 追加するボタン(リンク)のHTMLタグ --> <div class="puppy-db-link"><a href="<?php echo esc_url( get_post_meta( $post->ID, 'puppy-db-url', true ) ); ?>" title="<?php the_title(); ?>" target="_blank">詳細・お問合せはこちら</a></div> <?php // IFここまで endif; ?>
使い方(値取得:テンプレートファイル編集2-1) カスタムフィールドにフラグを登録してステータスを変更する場合
使い方(値取得:テンプレートファイル編集2-2) <ブラウザ表示>
使い方(値取得:テンプレートファイル編集2-3) < Source code > <!-- IF文:値が”1”ではない場合 --> <?php if(
!get_post_meta( $post->ID, 'selling-state', true ) == '1' ): ?> <!-- 追加されるHTMLタグ --> <div class="puppy-info-sale"><?php echo esc_html( 'オーナー様募集中' ); ?></div> <!-- 値が”1”の場合 --> <?php else: ?> <!-- 追加されるHTMLタグ --> <div class="puppy-info-sold-out"><?php echo esc_html( 'オーナー様決定しました。' ); ?></div> <?php endif; ?>
使い方(Contact Form 7との連携1) カスタムフィールドの値をコンタクトフォームで使用する場合
使い方(Contact Form 7との連携2) コンタクトフォームの編集に以下のコードを登録します。 <p class="no-display">子犬ID番号<br /> [text* puppy-id default:post_meta]</p>
※HTMLタグの<p>タグは別のタグでも問題ありません。 上記の場合、CSSで非表示(display: none;)にしています。
ご清聴ありがとうございました。 次回:WordPressのセキュリティー対策について考える おしまい