min117の日記

初期desireもち。趣味Mac,メインFedora,仕事xp。

「WordPress 仕事の現場でサッと使えるデザイン教科書」が良かった(自宅のLinuxサーバでWordPressサイト構築)

メルカリで購入。

f:id:min117:20210124111828p:plain

この本はWordPress4.x用だけど、やってる内容は5.xの環境でも動く。

手元のサーバも 5.x だけど、この本の記事(4.x)を試してみる。

 

サンプルファイルはここ。

gihyo.jp

巣ごもり時期だからこそスキルを伸ばしておく。やりたかったことをどんどん試す。

 

 

 

作ってみてわかったけど、WordPress簡単だコレ。phpの生コード書いて色々作ってると、WordPressは至極カンタンな関数の組み合わせであることが分かる。WordPressループのクセだけ知れば余裕。

 

サンプルどおりサイトを構築する中で、気になった点とかいくつか。

 

sidebar.php

sidebar-categories.php みたいに似た名前のファイルがあって最初はとっつきにくい。

 

sidebar.php はトップページで使ってしまっているので、個別ページ用にサイドバーとして

sidebar-任意文字列.php にしてるだけみたい。

f:id:min117:20210124100911p:plain

呼び元からは get_sidebar('任意文字列'); 関数で読む。

 

htmlにゴリゴリ書いているのを、WordPressが用意した関数にやらせるのが作業の基本。

 

つまり、例えばhtmlでサイドバーとして書いている部分<aside>の内容を、別のファイル sidebar-ホニャララ.php に切り出して、そこにリンクする関数(WordPressが用意してる関数)get_sidebar('categories'); を置いてやるみたいな作業の繰り返しになる。

 

p86「サイドバーにカテゴリー一覧を表示する」。

 

65行目にある <section class="recentCategories"> から

71行目にある </section><!-- /.recentCategories --> までを

f:id:min117:20210124081621p:plain

 

範囲選択で切り取って

f:id:min117:20210124082143p:plain

 

空いた箇所には、リンクするための関数 get_sidebar(); を置く。

f:id:min117:20210124082422p:plain

関数の書き方にクセがあって、実ファイル sidebar-categories.php へリンクするのに

<?php get_sidebar('sidebar-categories'); ?> じゃなくて

<?php get_sidebar('categories'); ?> とする。

 

切り取った箇所は別ファイル(sidebar-categories.php)に貼り付ければそれだけで動く。

f:id:min117:20210124083138p:plain

そこからさらに効率化するために編集する。

5行目と6行目。<li>の部分を(都度手で書き換えなくてもいいように)WordPress関数に置き換える。

 

こうなる。

f:id:min117:20210124091039p:plain

<li>部分が wp_list_categories( $args ); 関数になった。

 

こんな感じで、htmlの静的ページだと(記事更新のたびに)手作業で書き換えなきゃいけない部分を関数に置き換えていくのがWordPressの基本らしい。

 

作成途中の画面はこんな。

f:id:min117:20210124094144p:plain

 

index.phpが記事の骨組みで、サイドバーはsidebar.phpに切り出している。

f:id:min117:20210124095700p:plain

index.php に埋め込まれた個別ページが single.php

single.php から呼ばれるサイドバーが sidebar-categories.php

サイドバーをクリックして呼ばれる記事が categories.php といった感じ。

 

ヘッダはheader.php、フッターはfooter.php

 

ただ切り出せばそれだけでも動くけど、共通の修正点(いわゆる「お作法」)がいくつかある。忘れないようにメモ。

 

・hrefのPATHのドメイン部分は get_template_directory_uri(); を使う。

f:id:min117:20210124105010p:plain

関数を呼び終えてphpを閉じた直後のスラッシュを忘れるとcssが動かない。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/styles.css" type="text/css" />

 

titleタグには「記事の見出し」を表示する。wp_title(); 関数を使う。

f:id:min117:20210124104504p:plain

 

javascriptの読み込み重複を避けるため wp_enqueue(); 関数 を使う。

・headタグ内 wp_head(); 関数は必ず呼ぶ(どのページでも共通のヘッダメニュー出る)。

f:id:min117:20210124104711p:plain

 

bodyタグには body_class(); を呼んでおく

f:id:min117:20210124104755p:plain

 

header.phpアイキャッチ画像はトップページの時だけ表示させたい。

トップページかどうか判定するために is_home()  関数で判定する。

f:id:min117:20210124105404p:plain

51、53行目 WordPressのif文の入れ方が背中むず痒くなって苦手なんだけど。慣れるしかないか。

 

footer.php では必ず wp_footer(); 関数を呼んでおく。

f:id:min117:20210124105644p:plain

 

functions.php はしばらくは無視。

f:id:min117:20210124105806p:plain

大事なのは分かるけど、基本ができたあとの話だと思う。このへん細かくやるのは。

 

なお、必要なファイルは都度(冒頭ダウンロードしたサンプルから)もってくる。

f:id:min117:20210124111421p:plain

自宅サーバだとこれができるからいい。レンタルだと都度uploadになる。だるくてやってられん(shellでrsyncとかできるならいいけどさ)。

 

p92 トップページのテンプレートをindex.phpからfront-page.phpに変更。

f:id:min117:20210124112638p:plain

date.html から index.phpをあらためて作成。

f:id:min117:20210124113103p:plain

こういうの(ファイル名変更)も、自宅サーバならサッとできる。

 

<気になった点>

・サンプルファイルにあるindex.htmlをindex.phpに変えただけでなぜ動くかは不思議。WordPressの機能なのか?それとも(WordPress導入前に)設定した「htmlファイルにphpコードを書けるようにする」設定が機能したからなのか。

min117.hatenablog.com

 

WordPressループが個別記事ページにも必要な理由がよく分からん。

f:id:min117:20210124103336j:plain

まあ、WordPressの大元の機能のほうでループ回してる関係で、個別記事にも have_posts(); が必要なんだろう、くらいに思うことにした。

f:id:min117:20210124103552p:plain

 

巣ごもりコーディングで色々やりたかったことが進むのは嬉しいんだけど、家の中にいるので運動不足にならないように腹筋する。

 

KARA見ると腹筋鍛えたくてたまらなくなる。

youtu.be

 

min117.hatenablog.com

min117.hatenablog.com

min117.hatenablog.com

min117.hatenablog.com