Lesson 4

テーマをカスタマイズ

Lesson 4 Chapter 1
テーマをカスタマイズする

WordPressのテーマは、サイトのデザインやレイアウトを決定する重要な要素です。

デフォルトで組み込まれていますが、これだけでは自分のサイトを完全に表現できない場合や、他のサイトと差別化を図りたい場合には、テーマのカスタマイズが必要でしょう。

テーマについて理解を深めることで、自分のブランドイメージやデザインコンセプトに合った独自のサイトを作成することができるようになります。

ここではWordPressのテーマをカスタマイズするメリットや方法について解説します。

Lesson 4 Chapter 2
テーマとプラグイン

WordPressでの開発において、テーマとプラグインは、ウェブサイトの機能や外観をカスタマイズするために欠かせないツールです。

それぞれの役割を解説いたします。

テーマ:全体の見た目に関わる

テーマとは、サイトの外観を決定するためのファイルの集合体です。

ヘッダーやフッター、メニュー、スタイル、ページレイアウトなど、サイトの外観を形成するための設定を定義します。

ユーザーは、WordPressの管理画面からテーマを選択し、サイトの外観を変更することができます。

PHP、CSS、JavaScript、HTMLなどの言語で作成されており、テーマの構造は必須ファイルであるindex.phpをはじめ

  • header.php
  • footer.php
  • sidebar.php
  • functions.php

以上、これらのファイルは、テーマの構成要素を定義し、WordPressによって認識されます。

テーマには、無料のテーマと有料のテーマがあり、無料のテーマはWordPress.orgのテーマディレクトリからダウンロードできます。

有料のテーマは外部の市場から購入することが可能となっています。

例えば以下のようなものがあります。

  • レスポンシブデザイン
  • スマートフォンやタブレットなどのモバイルデバイスにも対応したデザインを指します。

  • カスタム投稿タイプ
  • WordPressの標準機能ではない、新しい投稿タイプを追加することが可能です。

  • ウィジェット
  • サイトのサイドバーやフッターに、様々なウィジェットを配置することが可能です。

  • カスタムメニュー
  • サイトのナビゲーションメニューを簡単にカスタマイズすることが可能です。

  • カスタムヘッダー/背景
  • サイトのヘッダーや背景をカスタマイズすることが可能です。

  • 翻訳対応
  • 多言語サイトに対応するために、ポーランド語、日本語、ドイツ語など、多くの言語に対応したテーマです。

プラグイン:データの扱いや動作に関わる

プラグインは、WordPressの機能を拡張するためのソフトウェアであり、様々な機能や機能性を追加することができます。

WordPressの基本機能を変更することなく、WordPressの機能をカスタマイズするために使用できます。

例えば、WordPressのSEO機能を拡張するためのSEOプラグイン、コンタクトフォームを作成するためのコンタクトフォームプラグイン、フォームの入力をチェックするためのバリデーションプラグイン、そして画像ギャラリーを作成するためのギャラリープラグインなどがあります。

WordPressにインストールされているテーマと同様に、ダウンロードしてインストールすることが可能です。

プラグインをインストールするには、プラグインのダウンロード、WordPressのプラグインディレクトリからプラグインを検索してインストール、またはFTPを使用してプラグインをアップロードすることができます。

プラグインは、WordPressの機能性を拡張するために、PHP、HTML、CSS、JavaScriptなどの言語を使用して開発されます。

Lesson 4 Chapter 3
テンプレート階層

以下がWordPressのテンプレート階層の図表です。

+--------------+ +--------------+
| wp-content | | wp-includes|
+--------------+ +--------------+
    |        |
+--------------+ +--------------+
| themes |     | files |
+--------------+ +--------------+
    |        |
+--------------+ +--------------+
| your_theme | | template |
+--------------+ +--------------+
    |        |
+--------------+ +--------------+
| template |   | load.php  |
+--------------+ +--------------+

  • wp-content
  • WordPressが生成するすべてのコンテンツを含むディレクトリです。

  • wp-includes
  • WordPressの基本機能やクラス、関数などが含まれるディレクトリです。

  • themes
  • テーマを格納するディレクトリです。

  • your_theme
  • テーマファイルを含むディレクトリです。

  • template
  • テンプレートファイルを含むディレクトリです。

  • files
  • プラグインなどのファイルを含むディレクトリです。

  • load.php
  • WordPressのコアファイルの一つで、必要な関数をロードするファイルです。

WordPressでは、テーマをwp-content/themes/以下に、プラグインなどのファイルをwp-content/plugins/以下に配置することが推奨されています。

テーマやプラグインのファイル構成は自由に設定することができますが、WordPressがテンプレートファイルを探し出すためのルールには従う必要があります。

作成可能なテンプレートの種類

WordPressでは、以下の種類のテンプレートを作成することができます。

  • index.php
  • 投稿や固定ページなどのすべてのページに使用されるデフォルトのテンプレートです。

  • front-page.php
  • フロントページに使用されるテンプレートです。

  • home.php
  • ブログインデックスページに使用されるテンプレートです。

    ブログインデックスページ(Blog index page)は、ブログのウェブサイトにおける、最新の投稿が一覧表示されるページのことを指します。

    通常、ブログのメインページやホームページとして表示されることが多く、訪問者はこのページから最新の投稿を閲覧することができます。

  • single.php
  • 単一の投稿に使用されるテンプレートです。

  • page.php
  • 単一の固定ページに使用されるテンプレートです。

  • archive.php
  • 投稿アーカイブページに使用されるテンプレートです。

  • category.php
  • 投稿カテゴリーのアーカイブページに使用されるテンプレートです。

    アーカイブページとは、WordPressのテーマにおいて、記事やカテゴリー、タグなどを一覧表示するためのページのことを指します。

    一般的には、アーカイブページは投稿の年別アーカイブ、月別アーカイブ、カテゴリーアーカイブ、タグアーカイブなどです。

  • tag.php
  • 投稿タグのアーカイブページに使用されるテンプレートです。

  • taxonomy.php
  • 投稿タイプのカスタムタクソノミーのアーカイブページに使用されるテンプレートです。

  • author.php
  • 投稿者のアーカイブページに使用されるテンプレートです。

  • date.php
  • 日付アーカイブページに使用されるテンプレートです。

  • search.php
  • 検索結果ページに使用されるテンプレートです。

  • 404.php
  • 404ページに使用されるテンプレートです。

    404ページとは、Webサイト上で存在しないページにアクセスしようとした際に表示されるエラーページのことです。

  • attachment.php
  • 添付ファイルページに使用されるテンプレートです。

  • image.php
  • 画像ページに使用されるテンプレートです。

  • header.php
  • テーマのヘッダーを定義するテンプレートです。

  • footer.php
  • テーマのフッターを定義するテンプレートです。

  • sidebar.php
  • サイドバーを定義するテンプレートです。

  • comments.php
  • コメントフィールドを定義するテンプレートです。

  • functions.php
  • テーマの機能を定義するためのテンプレートです。

Lesson 4 Chapter 4
ページテンプレート

ページテンプレートとは、WordPressの機能の1つで、ページのデザインやレイアウトをカスタマイズするためのテンプレートファイルのことです。

WordPressのページには、標準的なページテンプレートが用意されていますが、それ以外にもカスタムページテンプレートを作成することができます。

これにより、特定のページだけデザインを変更したり、独自の機能を追加したりすることができます。

ここでは、ページテンプレートの基本的な使い方や、カスタムページテンプレートの作成方法について解説します。

ページテンプレートの例

以下はページテンプレートの一例です。

Template.php
                      <?php /*Template Name: Custom Page */ get_header(); ?>
                      <main>
                      <section˃
                      <div class="container"˃<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                      <h1><?php the_title(); ?></h1>
                      <div><?php the_content(); ?></div>
                      <?php endwhile; endif; ?></div>
                      </section>
                      </main> 
                      <?php get_footer(); ?>
                    

この例は、"Custom Page"という名前のページテンプレートを作成しています。

テンプレートファイルには、WordPressのループを使用して、ページのタイトルとコンテンツを表示する基本的なHTML構造が含まれています。

get_header()とget_footer()は、テーマのヘッダーとフッターのコンテンツを取得できます。

ページテンプレートは、ページの属性から選択することができます。

ループとは

WordPressのループとは、WordPressのテーマファイル(主にindex.php)において、投稿記事や固定ページなどのコンテンツを取得して表示するための処理のことです。
投稿記事や固定ページのデータは、WordPressのデータベースに格納されていますが、ループを使ってそれらを取得し、表示することができます。

Lesson 4 Chapter 5
テンプレートで使われる関数

WordPressのテーマ開発において、テンプレートファイルにはテーマの機能を実現するために、多数の関数が使用されます。

これらの関数には、投稿のタイトルや日付、カテゴリーなどの情報を表示するためのものや、サイトのアーカイブページや検索結果ページを表示するためのものなどがあります。

ここでは、テンプレートで使われる使用頻度の高い主要な関数について解説します。

WordPressのテーマ開発に携わる人は必見です。

get_header()

get_header()は、WordPressのテンプレートファイルで使われる関数の1つで、テーマのヘッダー部分を呼び出すために使用されます。

通常、WordPressのテーマはheader.phpというファイルを持っており、このファイルにはヘッダー部分のHTMLやPHPコードが含まれています。

テンプレートファイルに記述すると、WordPressはこのファイルを読み込み、テーマのヘッダー部分を出力します。

get_header()は、引数を取らない場合、header.phpを読み込みますが、カスタマイズしたい場合には引数にテンプレートファイル名を指定することもできます。

たとえば、get_header('custom')と記述すると、header-custom.phpを読み込みます。

このように、テーマ開発者は、get_header()を使用することで、テーマのヘッダー部分を簡単にカスタマイズすることができます。

the_content()

the_content()は、現在の投稿または固定ページのコンテンツを出力するWordPressのテンプレートタグです。

投稿や固定ページの本文や記事の内容を表示するために使用されます。

ループ内で使用され、投稿や固定ページのループで the_content() を使用すると、現在の投稿または固定ページのコンテンツが表示され、 カスタム投稿タイプのループでも使用できます。

他にも the_content() は、自動的に段落タグで囲まれたコンテンツを出力します。

また、 the_content() には、コンテンツを加工するためのフィルターフックがいくつかあります。

これらのフィルターフックを使用して、コンテンツを編集したり、HTMLタグを追加したりすることができます。

フィルターフックとは

フィルターフックとは、WordPressのテーマやプラグインで処理されるデータを変更するために使用される仕組みの1つです。
使用すると、WordPressがデータを取得して加工する前、あるいは表示する前に、処理されるデータを変更できます。

wp_head()

wp_head()は、WordPressのヘッダーに必要なメタタグ、スタイルシート、スクリプトなどの情報を表示するために使用される関数です。

これをテンプレートのヘッダーに挿入することで、WordPressが生成するデフォルトのメタ情報やスタイルシートを読み込むことができます。

また、プラグインやテーマが生成する追加のメタ情報やスタイルシート、スクリプトなども読み込むことができます。

この関数は、<head>要素の終了タグの直前に挿入されるため、テンプレート内でこの関数を呼び出すことによって、<head>要素の中に必要な情報を追加することができます。

例えば、Google Analyticsのトラッキングコードなどを追加する場合、この関数を呼び出してスクリプトを挿入することができたりします。

以下は、基本的な使い方の例です。

php
                      <head>
                       <?php wp_head(); ?>
                      </head>
                    

この例では、wp_head()を

要素内に挿入しています。

これにより、WordPressが生成するデフォルトのメタ情報やスタイルシートを読み込むことができます。

また、プラグインやテーマが生成する追加の情報も読み込むことができます。

comments_template()

comments_template()は、テンプレートファイルの中でコメントセクションを表示するために使用されるWordPressの関数です。

コメントセクションを表示するには、comments.phpという名前のテンプレートファイルを作成し、その中にコメントフォームやコメントリストの表示に必要なコードを書きます。

comments_template()は、このcomments.phpファイルを呼び出して、現在のページのコメントセクションを表示します。

デフォルトでは、comments_template()はcomments.phpファイルを探しに行きますが、テーマ開発者は、comments_template()の引数として、テンプレートファイルのパスを指定することもできます。

たとえば、comments_template('/custom-comments.php')とすると、カスタムコメントテンプレートファイルcustom-comments.phpが読み込まれます。

body_class()

WordPressのテンプレートで使用される body_class() 関数は、現在表示しているページに対してクラスを出力するために使用されます。

これにより、CSSスタイルを特定のページにのみ適用することができます。

body_class() 関数は、WordPressの body 要素にクラスを追加するために使用されます。

例えば、記事が表示される個別の投稿ページでは、投稿のタイトル、カテゴリー、タグなどに基づいてクラスが生成されます。

これにより、ページに独自のスタイルを適用することができ、 また、body_class() 関数は、WordPressの管理画面でも使用されます。

WordPressのテーマを作成する際には、管理画面用のスタイルを作成することもできます。

この場合、 body_class() 関数は管理画面に特有のクラスを出力するために使用されます。

その他の関数

  • the_title()
  • 投稿タイトルを出力します。

  • the_excerpt()
  • 投稿の抜粋を出力します。

  • the_permalink()
  • 現在の投稿やページのパーマリンクを出力します。

    パーマリンクとはページや投稿のURLのことを指します。

  • the_author()
  • 投稿者名を出力します。

  • the_post_thumbnail()
  • 投稿のアイキャッチ画像を出力します。

  • get_sidebar()
  • サイドバーテンプレートを読み込みます。

  • is_home()
  • ブログページかどうかを判定します。

  • is_category()
  • カテゴリーページかどうかを判定します。

  • is_search()
  • 検索結果ページかどうかを判定します。

  • get_search_form()
  • 検索フォームを出力します。

  • comments_popup_link()
  • コメントのリンクを出力します。

  • get_template_part()
  • テンプレートの一部を読み込みます。

  • dynamic_sidebar()
  • ウィジェットエリアにウィジェットを表示します。

これら以外にもまだまだたくさんの関数が用意されています。

Lesson 4 Chapter 6
テーマフレームワークを使用する

WordPressテーマ開発において、テーマフレームワークは非常に重要な役割を果たします。

テーマフレームワークは、WordPressテーマを開発する際に使用できるコードと構造のセットであり、一般的には規模の大きいWebサイトやアプリケーションに適した高度な機能を提供することができます。

ここでは、テーマフレームワークとは何か、どのようにしてテーマフレームワークを使用するか、およびWordPressテーマ開発におけるテーマフレームワークの重要性について説明します。

テーマフレームワークの概要と特徴

テーマフレームワークとは、WordPressのテーマ作成をより簡単にするための基盤となるプログラムのことです。

フレームワークは、共通する機能や構造を備えたテンプレートを提供し、テーマ開発者がより迅速かつ容易にカスタマイズできるようにします。

テーマフレームワークの特徴として、以下の点が挙げられます。

  • カスタマイズ性が高い
  • テーマフレームワークは、カスタマイズが容易であるため、開発者は独自のテーマを作成することができます。

  • モバイルフレンドリー
  • 最近のテーマフレームワークは、スマートフォンやタブレット端末などのモバイルデバイスからも快適に閲覧できるレスポンシブデザインが標準搭載されています。

  • SEO対策がしやすい
  • SEO対策をするためのテンプレートが標準で含まれていることが多いです。

  • アップデートに対応
  • テーマフレームワークは、アップデートに対応しており、最新版にアップグレードすることでセキュリティ面でのリスクを軽減することができます。

  • ドキュメントが充実している
  • 多くのテーマフレームワークは、ドキュメントが充実しており、開発者が迷うことなく開発を進めることができます。

一般的に、テーマフレームワークはプレミアムの有料テーマとして提供されていますが、無料で公開されているものもあります。

テーマフレームワークを使用することで、テーマ作成の効率化や品質の向上を図ることができます。

代表的なテーマフレームワーク『underscores』

Underscores(アンダースコア)は、WordPressのテーマフレームワークのひとつで、素早く簡単にカスタムテーマを開発するために使われます。

以下にUnderscoresの特徴を挙げます。

  1. 最小限のコード
  2. 最小限のコードだけで構成されており、自分でコードを追加することで独自のテーマを開発できます。

  3. スマートなデフォルト
  4. デフォルトでCSSグリッド、ナビゲーション、カスタムロゴ、投稿フォーマット、ウィジェットエリア、カスタム背景、カスタムヘッダーなどが組み込まれています。

  5. カスタマイズ可能
  6. すべての部分がカスタマイズ可能で、 必要な機能だけを組み合わせて自分だけのカスタムテーマを作ることができます。

  7. レスポンシブ対応
  8. レスポンシブ対応されているため、さまざまなデバイスに対応しています。

  9. ウィジェットエリア
  10. ウィジェットエリアが用意されているため、 テーマ開発者は簡単にウィジェットを追加できます。

    レスポンシブデザインにも対応しており、すべてのデバイスで同じ表示になります。

  11. スニペットやスタイルのサポート
  12. カスタム投稿タイプ、独自のショートコード、独自のスニペット、追加のスタイルなどを追加するための方法が用意されています。

  13. ドキュメントが充実している
  14. テーマフレームワークの使い方やカスタマイズ方法についての豊富なドキュメントがあり、初心者でも簡単に使い始めることができます。

  15. WordPress標準の関数を使用
  16. WordPress標準の関数を使用しているため、プラグインとの互換性が高く、WordPressのアップデートにも対応しやすくなっています。

  17. アップデート頻度
  18. WordPressのアップデートに対応するために頻繁に更新されています。

    これにより、開発者は、常に最新の機能や改善点を使うことができます。

Underscoresは、WordPressのテーマフレームワークとして人気があり、多くの開発者が利用しています。

CSSグリッドとは

CSSグリッド(CSS Grid)は、CSSのレイアウトモジュールの一つで、グリッドシステムを使ってページを分割し、複数の要素を配置することができる機能です。
CSSグリッドを使用することで、従来のフレックスボックスやテーブルに比べて柔軟で効率的なレイアウトが可能となります。

スニペットとは

スニペットとは、コードやテキストの断片を指します。
プログラミングにおいては、よく使われる処理や関数、テンプレートなどをスニペットとして登録しておき、再利用しやすくすることができます。

ショートコードとは

WordPressでは、投稿や固定ページなどのコンテンツ内で特定の処理を行うための独自のショートコードを定義することができます。
ショートコードは、[shortcode]のように角かっこで囲まれた任意のテキストで、それが表示される際にはそのショートコードが定義された処理が実行されます。