記事の詳細
WordPressでよく使うプラグイン紹介!アドバンスカスタムフィールド(出力編)
今回のブログの見出しはコチラです!
はじめに
こんにちは!前回は基本プラグイン「アドバンスカスタムフィールド」の入力編として
管理画面上での設定方法をご紹介しました。
今回は出力編として、用意したフィールド内に入力した情報を表示させていきます。
それではさっそく続きからはじめていきましょう!
フィールドに入力しよう!
①左端のメニューから「投稿」>「新規追加」
②任意のタイトルを入力。
③「画像を追加する」を選択後に出てくるダイアログから、「ファイルをアップロード」タブを選ぶ。
「アップロードするファイルをドロップ」もしくは「ファイルを選択」から任意の画像を選ぶ。
④つづいて、「メディアライブラリ」から③でアップロードした任意の画像を選択。
⑤説明文に任意のテキストを入力。下図のようになりました。
⑥公開!
出力の前に..確認しよう!
⑦まずは、現在自分の使っているテーマを確認。今回は「Twenty Seventeen」を使います。
⑧次に、content.phpの置いてあるフォルダを開く。
私はXAMPPを使用してローカル環境で構築したため、下記手順となります。
htdocs(※ここは各自で違います)>wp>wp-content>themes>twentyseventeen>template-parts>post
※XAMPPについて詳しくはこちら
さあ、出力しましょう!
⑨任意のテキストエディタでcontent.phpを開く。TeraPad、Bracketsは使いやすく設定が簡単なエディタなので、参考にしてください。
Brackets:https://brackets.softonic.jp/
TeraPad:https://tera-net.com/library/tpad.html
⑩<div class=”entry-content”>のあとに、「(◆)挿入するコード」を追記して保存する。
(◆)挿入するコード
1 2 3 4 |
<div> <img src="<?php the_field('画像'); ?>"> <p><?php the_field('説明文'); ?></p> </div> |
⑪説明文と画像の出力完了!!
確認のときは、「投稿」>「投稿一覧」から情報を入力した記事を開き、変更をプレビュー。
いかがでしたか?内容としては、出力前の確認以降が少し難しいかもしれませんね。
今回の画像とテキストの出力はよく使ますので、ここからさらに応用して使いやすいようにカスタマイズしてみてください!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。