WordPress勉強会 Day05-3ターム目

勉強会授業後の確認資料です。

HTMLサイトをWordPressにする本をベースに進めています。
この本では一度静的サイトを構築してからWordPress化していますが、私は普段制作する際は
そこはなくデザインの後すぐにWordPressを構築に入っています。何のテーマかというのは後ほど。

今回はデジハリで卒業制作が終わった後WordPress化したいという要望が多く、その流れでできるようにと著者の先生方がご教示していただいているのだと思います。とてもありがたいです!

このページは参加された方が後からなんとなく思い出せるように書いてます。

授業内容

今日は「Advanced Custom Fields(ACF)」がメインかな

うわ!もう5回目・・予定よりちょい時間がかかっておりますがドンマイ!
本日の内容もテキストと違うので、、復習しないとですね

1.会社概要ページの作成

p185からスタート

company.htmlをコピーして「page-company.php」に変更
いつもの
<?php get_header(); ?>と<?php get_footer(); ?>をします!

固定ページを作成。スラッグを必ず「company」にすること。ここは結びついている

2.カスタムフィールドの設定

テキストでは「Smart Custom Fields(SCF)」というプラグインを入れてますが現在Smart Custom Fieldsは開発終了になっているので
「Advanced Custom Fields(ACF)」を入れます。

今回のテキストの流れで言うとSC FとACFの一番の違いは繰り返しができないと言うこと。ACFも有料にすれば繰り返せます。

左側のメニューのACFのところでフィールドグループを追加
グループ名「company_group」

まずは画像!以下のように設定

次にテキストブロックとなる会社設立年のところ

地図のところがリッチエディターと言うのなので上記のと違います。以下のように

そして一番下の設定を

会社概要ページには入力されるところが出るようにします。

3.固定ページ(会社概要)に掲載内容を入力する(p191〜)

基本的に191〜195までは一緒

4.ACFを表示させる!

 <dt>社名</dt>
 <dd><?php the_field('company_name'); ?></dd>

と言うように
<?php the_field(‘フィールド名’); ?>で表示されます。

ただmapのみ

<div class="map">
<?php  echo get_field('company_map'); ?>
</div>

上記のように

<?php echo get_field(‘フィールド名’); ?>と書いてくださいね

テキストのSCF::~~というのは今回は書くことはないです。

5.トップページ

前回front-page.phpについてお話がてら作ってみましたので既に存在していますが、
P207ページから作業します。上書きしました

いつもの
<?php get_header(); ?>と<?php get_footer(); ?>をします!


というわけでここまででした。

ここまでできたらこんな感じ(画像とか見えてないよ)
https://cogumo.sakura.ne.jp/wordpress3/
参加された方にパスワードは送ります。

宿題

1.front-page.phpの画像のパスをphpに対応したものにしてくること
例えば
./img/top-about-img1-sp.jpgを

<?php echo get_stylesheet_directory_uri(); ?>/img/top-about-img1-sp.jpg

というようにしてください。

2.front-pageに設置したACFの中身を入れてきてください。(画像とタイトルとテキスト)
頑張れたらフッターのACFを作ってくる。(できるかな〜できたらで)ここまでのデータも持っていきます。

次回の内容は

  • トップページ
  • やり残してるフッター
  • まだ入れてないプラグイン

次回で一旦テキストは終わるかなと思っている。

でも本当はカスタムポストタイプをやりたいのでそこはまた相談です

お疲れ様でした。