「WordPress標準デザイン講座 第2版」本の学習が終わりました。
いや~長かった。
途中ココナラで案件をやっていたりしてたので、一ヶ月くらい掛かってしまいました。
最後の方の「その他便利なプラグイン」「レンタルサーバー上にサイトを公開する」は飛ばしました。
感想。
難しいですね。
覚えるテンプレートタグなどがたくさんあります。すべてを覚えるのは無理だと思うので、実際実務でWordPressサイトを作っている人は本などを見ながら進めているのでしょう。
私はなんとなく理解できたので、今回はそれで良し。
前々回の記事で前半部分の解説をしたので、今回は後半の内容をザックリ解説していきます。
各種ページ用にテンプレートファイルを作成する。
これまでの作業では全てのページをindex.phpファイルで作ってきたので、どのページも全て同じデザイン(レイアウト)になってしまいます。
しかし実際のwebサイトでは、
- 固定ページにはサイドバーを表示しない。
- 投稿(ブログ)一覧ページには抜粋文のみ表示。
- 個別投稿(ブログ記事)ページには全文を表示。
- サイトの内容を分かりやすく伝えたりデザイン性を高めるため、ホームページのみ異なるレイアウトにする。
などと、ページによってデザインを変えるケースがほとんどです。
そこで各種ページ用にテンプレートファイルを分けて作っていきます。
ファイル名は以下のように作ります。
- ホームページ:front-page.php
- 固定ページ(プロフィールなど):page.php
- 投稿(ブログ)一覧ページ:home.php
- 個別投稿(ブログ記事)ページ:single.php
front-page.phpとhome.phpは混同しやすいですが、
- front-page.phpは固定ページのホームページ
- home.phpは投稿一覧ページ
と覚えましょう。
管理画面の「表示設定」→「ホームページの設定」で、「最新の投稿」にするとhome.phpがホームページになります。
そのほか「テンプレート階層」とかいう概念もあるのですが、それはよく分かりませんでした(^^;
アイキャッチ画像機能をつける。
そのままではアイキャッチ画像機能がついてません。
機能をつけるには、まず「functions.php」(sを忘れずに!)に機能を追加するコードを書き、「index.php」に表示するテンプレートタグを書きます。
the_post_thumnailテンプレートタグを書いた場所にアイキャッチ画像が表示されます。
【豆知識】
アイキャッチ画像は英語で「Post Thumbnails」といいます。Thumbnail(サムネイル)とはThumb(親指)nail(爪)で、「親指の爪」で「とても小さなもの」という意味。
アイキャッチ画像は小さな画像なので。
ウィジェット機能を付ける。
そのままではウィジェット機能(サイドバーなどのパーツ)が付いてません。
機能をつけるには、アイキャッチ画像機能と一緒で「functions.php」に機能を追加するコードを書き、「sidebar.php」に表示するテンプレートタグを書きます。
dynamic_sidebarテンプレートタグを書いた場所にウィジェットが表示されます。
※functions.phpに書く最後のコード「widgets」のsを忘れずに!ここだけsが付く!
カスタムメニュー機能を付ける。
カスタムメニュー機能とは、グローバルナビなどのナビゲーションの事です。
この機能を付けるやり方も一緒で、「functions.php」に機能を追加するコードを書き、「header.php」に表示するテンプレートタグを書きます。
wp_nav_menuテンプレートタグを書いた場所にナビゲーションが表示されます。
このカスタムメニュー機能追加の特徴は、コードが連想配列になっている所です(ナビゲーションの項目がいくつかあるので)。
お問い合わせフォームを設置する。
この本では、お問い合わせフォームをMW WP Formプラグインで作るのですが、簡単なんだか難しいんだかよく分かりませんでした。
まぁ本の通りに進めていけば大丈夫です。
今後の予定。
今回勉強した、WordPressサイトをテンプレートタグなどを使って作っていく方法をもっと勉強すれば割高な案件ができるようになるとは思うのですが、
それはまた今度にし、次はJavascriptを勉強しようかなと思っています。
なぜJavascriptかというと、やはりプログラミングの王道と言えばJavascriptだし、結構目にする機会が多いんですよね。
例えばGoogleアドセンスとか「ブログのカスタマイズ」の時とか。知っておいて損はない。
とりあえずまたプロゲートかな。
コメント