Loading...
WordPress

WordPressでよく使うプラグイン1

2013.10.30 update

制作の中の人です。こんにちは。
今回はWordPressについての投稿です。

WordPressについては初のお話なので、まずはよく使用しているプラグインを紹介してみます。

Advanced Custom Fields

Advanced Custom Fields
カスタムフィールドの追加や定義がかなり楽にできるプラグイン。

グループの定義

使い方としては、まず定義をします。
「新規追加」をクリックしてグループ名をつけます。

wordpress - Advanced Custom Fields

グループ名は日本語でも大丈夫です。
ルールについては、「該当するカテゴリのみ適用する」などのように設定出来るので、わかりやすいグループ名のほうがよいと思います。下の例では未分類カテゴリの投稿のみに適用するようになっています。

wordpress - Advanced Custom Fields

フィールドの定義

次に、フィールドを定義します。
ラベル名は日本語で任意に分かりやすいものを。フィールド名はアルファベットに。
フィールドタイプはテキスト、テキストフィールド、画像のアップロード、チェックボックスなど、いわゆるフォームで使えるもので定義することができます。カレンダーが出て日付を選択できるデイトピッカーもある。

wordpress - Advanced Custom Fields

保存する

右にある公開ボタンを押すと、フィールドの定義が終了し、保存されます。
フィールドについてはいくつも同じルールで定義可能なので、例えば、商品名、金額、商品画像などのように複数のフィールドを定義することができます。

wordpress - Advanced Custom Fields

投稿画面でフィールドが表示

定義が終わると、該当する条件に当てはまった投稿の場合、フィールドが表示されます。

フィールドを表示

テンプレートでの表示方法

投稿で入力したカスタムフィールドはテンプレート側で呼び出せます。
大まかにthe_fieldかget_fieldの2つです。the_fieldは、echoしてくれるのでこのまま表示されます

[php]<?php the_field(‘test_field’); ?>[/php]

一度変数に入れてから、色々やりたい場合などはget_fieldで変数に格納してから手動でechoします。

[php]<?php $var = get_field(‘test_field’);
echo $var;
?>[/php]

他にもよく使うプラグインがあるのですが、それはまた次回

関連記事

  • 2014.10.10

    スターターテーマ「_s」でオリジナルテーマをつくる(1)

  • 2014.09.05

    WordPressのxmlrpc.phpについて

  • 2014.09.01

    かゆい所に手が届くWordPress 4.0アップデート

COLUMNコラム

2014.10.10

スターターテーマ「_s」でオリジナルテーマをつくる(1)

2014.06.13

WordPressで投稿メニューを増やす(1)

2016.05.11

システムエンジニア S.G

2013.10.02

photoshop簡単に明るくふわっとした肌にする。

2014.01.17

サイトにひと味加えるWordPress テーマ

2018.05.24

Googleカレンダーにイベント登録、ChatWorkへメッセージを送信する方法①

2018.06.14

Googleカレンダーにイベント登録、ChatWorkへメッセージを送信する方法②

2013.10.25

新人ウェブデザイナーの制作話

2016.05.11

システム開発とは?

2013.12.06

WordPressを使ったサイト事例

2013.11.15

WordPressでよく使うプラグイン2

2014.10.03

iPhone6/plus のスクリーン

2014.07.04

ぐるなび公式レストラン検索 「WordPressプラグイン」

2016.05.11

システム導入のメリット

2014.06.20

WordPressのドメイン変更・サーバ移転など

2018.07.17

Googleカレンダーにイベント登録、ChatWorkへメッセージを送信する方法③

2013.12.27

WordPress 3.8

2013.11.29

WordPressでよく使うプラグイン3

2016.05.11

無線エンジニアのご紹介 K.N

2018.08.06

Node.js+express環境構築手順(2)