WordPressテーマの開発

by administrator

WordPressテーマの開発

WordPressのテーマの開発は、主にphpを用いて行います。

phpを用いている理由は、phpファイルでTOPページを作成することにより別ページのコンテンツの情報を引用することができたり、他のページの更新情報が動的に反映されるといったメリットがあるからです。

WordPressテーマファイルの保存場所

WordPressのテーマファイルは、「wp-content/themes」に保存されます。自作したテーマをWordPressで使う場合、このファイルにWordPressのテーマを保存します。

WordPressテーマのファイル構成

WordPressのテーマは以下のファイルで構成されています。

  1. index.php
  2. header.php
  3. footer.php
  4. page.php
  5. single.php
  6. archive.php
  7. sidebar.php
  8. 404.php
  9. style.css
  10. function.php

参考資料

https://wpdocs.osdn.jp/テーマの作成

順番にそれぞれの機能を説明します。

１．index.php

WordPressで作成したテーマのTOPページを表示させるためのファイルです。

コード例

２．header.php

各ページの「head」部分や「body」の上部を構成するファイルです。

headやbodyというのは、ホームページを構成するプログラミング言語であるHTMLで使われているタグというもののことです。

３．footer.php

各ページの<body>下部を構成するファイルです。

４．page.php

固定ページのテンプレートファイルです。

５．single.php

投稿ページのテンプレートファイルです。

６．archive.php

記事を一覧表示させるページのテンプレートファイルです。

７．sidebar.php

サイトが2カラムや3カラムある時に表示される本体横のコンテンツです。

８．404.php

ユーザーが存在しないURLに飛んでしまったときに表示するエラーページの設定ができるファイルです。

９．style.css

サイトのデザインを構成するファイルです。

１０．function.php

サイト上のショートコードを作成するなどのワードプレスの機能を追加するためのファイルです。

記述するコード

WordPressでは、特異なコードを使用します。必要なプログラミング言語の知識は、「HTML、CSS、PHP」です。

コメントの記述

WordPressのテーマは、コメント欄テーマの詳細を記述します。これらの情報はテーマに関する情報で、スタイルシートヘッダと呼ばれます。テーマの名前は必須で、それ以外については任意で記述します。

/*
  Theme Name:   テーマの名前（必須）
  Description:  テーマの説明
  Theme URI:    テーマのURL
  Author:       作成者の名前
  Author URI:   作成者のURL
  Version:      テーマのバージョン番号
  License:      ライセンス
  License URI:  ライセンスのURL
*/

これらの詳細についてはCodexを参照してください。

実際にテーマを作成する

実際にテーマを開発していきます。このページでは、テーマ開発のサンプル例として各テーマファイルのコード例を紹介します。各ファイルごとのコードをコピペして保存し、Zipファイルでアップロードするなどしてテストすることを想定しています。

index.phpの記述例

<?php
 /**
 * The main template file.
 *
 * @package WSFSampleTheme
 */

get_header(); ?>
<section id="primary" class="content-area">
		<main id="main" class="site-main">
		<?php
		if ( have_posts() ) { 
			while ( have_posts() ) { 
				the_post(); 

				get_template_part( 'template-parts/content/content' ); 
			}

		}
                else {
			get_template_part( 'template-parts/content/content', 'none' );

		}
		?>

		</main>
	</section>
<?php get_footer(); ?>

style.cssの記述方法

今回の作成例では、style.cssにはBootstrapファイルを用います。Bootstrapの詳細については下記リンク先を参照してください。

Bootstrap

screenshot.png

実装するワードプレステーマのプレビュー画面についての画像です。WordPressでテーマを選択するときに表示されます。

より詳細なテーマの開発方法

テーマ開発の詳細については下記リンク先で詳しくまとめました。