BLOG

  • Facebook
  • Twitter

初めて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ライフを!

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

その他のオススメの記事

ホームページのことは何でもお気軽にご相談ください!

092-406-8630

平日10:00〜18:00セールス目的のお電話はご遠慮ください

Webマーケティングのお役立ち情報を発信しています!