記事の詳細

はじめに

こんにちは!前回は基本プラグイン「アドバンスカスタムフィールド」の入力編として
管理画面上での設定方法をご紹介しました。
今回は出力編として、用意したフィールド内に入力した情報を表示させていきます。
それではさっそく続きからはじめていきましょう!

フィールドに入力しよう!

①左端のメニューから「投稿」>「新規追加」

②任意のタイトルを入力。

③「画像を追加する」を選択後に出てくるダイアログから、「ファイルをアップロード」タブを選ぶ。
「アップロードするファイルをドロップ」もしくは「ファイルを選択」から任意の画像を選ぶ。

④つづいて、「メディアライブラリ」から③でアップロードした任意の画像を選択。

⑤説明文に任意のテキストを入力。下図のようになりました。

⑥公開!

出力の前に..確認しよう!

⑦まずは、現在自分の使っているテーマを確認。今回は「Twenty Seventeen」を使います。

⑧次に、content.phpの置いてあるフォルダを開く。
私はXAMPPを使用してローカル環境で構築したため、下記手順となります。
htdocs(※ここは各自で違います)>wp>wp-content>themes>twentyseventeen>template-parts>post

※XAMPPについて詳しくはこちら

XAMPPで仮想環境を構築してwordpressをインストールする方法
はじめまして、網干と申します。本日は表題の通り、XAMPPで仮想環境を構築してwordpressをインストールする方法を掲載します。※本記事ではセキュリティの設定を考慮して...

さあ、出力しましょう!

⑨任意のテキストエディタでcontent.phpを開く。TeraPad、Bracketsは使いやすく設定が簡単なエディタなので、参考にしてください。
Brackets:https://brackets.softonic.jp/
TeraPad:https://tera-net.com/library/tpad.html

⑩<div class=”entry-content”>のあとに、「(◆)挿入するコード」を追記して保存する。

(◆)挿入するコード

⑪説明文と画像の出力完了!!
確認のときは、「投稿」>「投稿一覧」から情報を入力した記事を開き、変更をプレビュー。

いかがでしたか?内容としては、出力前の確認以降が少し難しいかもしれませんね。
今回の画像とテキストの出力はよく使ますので、ここからさらに応用して使いやすいようにカスタマイズしてみてください!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
小林紗絵

小林紗絵

Web制作担当をしています。Adobeソフトを使用したデザインやコーディングを中心にサイト制作に携わっております。今後はWordpressのテーマ作成やマーケティングなど少しずつできることを増やしていきたいと思います!

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る