初めてWordPressオリジナルテーマを作る時に知っておきたい基礎

| カテゴリー : WordPress

こんにちは、福岡のホームページ制作アイドットデザイン。WordPressが好きなちゃんけいです。

今回はWebサイト制作の勉強を始めてからHTML/CSSを学んだ上でWordPressの勉強を始めた方向けに、WordPressのテーマ作りで知っておきたい基礎を紹介します。

テーマに必要なファイル

テーマを作る際に最低限入っていないとテーマとして認識されないものがあります。
それがこちらの2つ。テーマフォルダの直下に必ず忘れないように作りましょう。

  • index.php
  • style.css

style.cssには、以下の内容を記載します。
管理画面でテーマを選択する際に表示される文言になります。

ファイルの切り分け

一般的なhtmlと違い、ページによって共通する部分は別ファイルに切り分けて扱います。
ヘッダー・フッターを別ファイルにして、それぞれをheader.phpとfooter.phpにします。

htmlファイルの1行目から複数ページで共通になっている部分をまるっとheader.phpとして保存します。
フッターも同様に、一番下の行から共通の部分までをまるっとfooter.phpとしてください。
別ファイルにしたヘッダー・フッターの表示するには、こちらの関数を記述します。

head要素とbody要素を閉じる直前には以下の関数を記述してください。

wp_head()

head要素を閉じる直前に<?php wp_head();?>を記述してください

wp_footer()

body要素を閉じる直前に<?php wp_footer();?>記述してください

これで共通パーツが完成しました。
ヘッダーやフッターに変更がある場合は、1つのファイルを修正することで全ページの表示に反映されます。
とても便利ですね。

ファイルのパスとリンク

WordPressでサイトを制作した場合にテーマを置く場所とドメインの読み込む場所に違いが出ます。
正しくパスが通るように調整しましょう。

画像の読み込み場所イメージ

htmlサイトの場合
https://hogehoge.net/images/img01.jpg

WordPressの場合
https://hogehoge.net/wp-content/themes/テーマ名/images/img01.jpg

画像のリンク際はこちらの関数を使います。

ページのリンクも同様に、こちらの関数を使うとドメインのURLを取得して表示することができます。

functions.phpの記述

functions.phpは、プラグインのようにサイトへ機能を追加できるファイルです。2つの機能を追加してみましょう。

the_excerptのカスタマイズ

the_excerpt関数は、ページの本文を抜粋表示できます。記事一覧ページなどでよく使われています。

本文抜粋時の文字数制限を、任意の長さにできるようにカスタマイズします。

日本語の抜粋が指定した数字通りにうまく行かない場合は、プラグインの「WP Multibyte Patch」を使うことで解決できます。

アイキャッチ画像の設定

オリジナルテーマの場合、管理画面にアイキャッチ画像の項目はありません。
なので、アイキャッチ画像を設定できるようにfunctions.phpに記述する必要があります。

add_theme_support関数を使いましょう。

上記2つを書いたfunctions.phpはこのようになります。

記事を表示するWP_Queryを使ったループの書き方

WordPressを使う醍醐味と言えば、更新コンテンツの表示です。

今回はWordPressに最初から備わっている「投稿」を表示してみましょう。

HTMLはこちらを前提とします。

ループにはWP_Queryを使用します。$argsに記事を表示する条件を指定する。

最後に記事のタイトルや日時、抜粋文をWordPressの記述に置き換えて完成です!

まとめ

以上、知っておきたい基礎でした。
説明が複雑な部分はさくっと省略している部分もありますが、それはまたの機会に。

サンプルコードで出てくる関数を調べることで、理解が深まり自分のやりたいカスタマイズ・表示をすることができるかと思います。

それでは、良きWordPressライフを!

売上アップ、人材採用、顧客獲得など様々なご要望に最適なホームページを制作いたします。

儲かる会社はやっている!小さな会社のホームページ集客の鉄則

無料の資料をダウンロード

×

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。