前回に引き続き、WordPressのお話をしようと思います。
↓↓↓↓↓前回の記事はこちら↓↓↓↓↓
https://k-1blog.com/development/program/post-13334/
今回はもっと奥まで掘り下げて、
WordPressの基本構造の解説です。
構造を理解するために、
実際に自作テーマを作りながら説明していきます。
「phpとか絶対触りたくないよー」
というWebデザイナーの方でも
コピペで作成できるようにまとめてありますのでご安心ください。
また、テーマを作成する前に、
あらかじめ、デモ用のhtmlソースを用意しておきました。
こちらのソースを使って自作テーマを作成していきます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sampleサイト</title><!--サイトのタイトル--> </head> <body> <header> <h1>sampleサイト</h1><!--サイトのタイトル--> </header> <section> <h2><a href="#">記事のタイトル１</a></h2><!--記事のタイトル--> <h2><a href="#">記事のタイトル２</a></h2><!--記事のタイトル--> <h2><a href="#">記事のタイトル３</a></h2><!--記事のタイトル--> </section> <footer> © 2018 kosekin. </footer> </body> </html>
デモ用のhtmlは、ブラウザでは以下のように表示されます。
※構造をわかりやすくするために、テキストのみの簡易的なソースにしてあります。
それでは早速、WordPressの自作テーマを作成していきましょう。
目次
テーマフォルダを作成する
まずはFTPソフトを起動して
/wp-content/themes/
のディレクトリ内に新しいフォルダを作成し、テーマ名（sample）を入力します。
このフォルダ内にテーマを構成するファイルを作成します。
まずは空のファイルでいいので、以下５つのファイルを用意します。
- WordPressテーマの基本ファイル
- （１）style.css
- （２）header.php
- （３）footer.php
- （４）index.php
- （５）single.php
- （screenshot.png） ※この画像は後で追加します
style.css
style.cssにテーマの情報を入力します。
/* Theme Name: テーマの名前（必須） Theme URI: テーマのURI Author: テーマの作者名 Author URI: テーマ作者のURI Description: テーマの説明 Version: テーマのバージョン License: テーマのライセンス License URI: テーマライセンスのURI Tags: テーマのタグ,テーマのタグ,テーマのタグ */
style.cssのコメントヘッダに入力した情報は、
このように「管理画面 > 外観 > テーマ」の画面に反映されます。
screenshot.png
先ほどの「管理画面 > 外観 > テーマ」の画面表示を確認すると、
テーマは認識されていますが、
テーマを表す画像が空になっているのがわかります。
ここに画像を表示させたい場合は、
screenshot.pngという画像ファイルをテーマフォルダ内へアップロードします。
※推奨サイズは横880px、縦660px
すると、このように画像が表示されるようになります。
※通常はTOPページデザインのキャプチャや、テーマの名前が入った画像を入れるのが一般的です。
header.php
あらかじめ用意したhtmlソースのheader以上の部分をコピぺします。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sampleサイト</title><!--サイトのタイトル--> </head> <body> <header> <h1>sampleサイト</h1><!--サイトのタイトル--> </header>
そこに、サイトのタイトルタグを以下のように挿入します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><?php bloginfo('name'); ?></title><!--サイトのタイトル-->
</head>
<body>
<header>
<h1><?php bloginfo('name'); ?></h1><!--サイトのタイトル-->
</header>
※サイトのタイトルを生成するタグ
<?php bloginfo('name'); ?>
このファイルは、全ページの共通ヘッダーとして表示させることになります。
あらかじめ用意したhtmlソースのfooter以下の部分をコピぺします。
<footer> © 2018 kosekin. </footer> </body> </html>
このファイルは、全ページの共通フッターとして表示させることになります。
index.php
あらかじめ用意したhtmlソースのsection部分をコピぺします。
<section> <h2><a href="#">記事のタイトル１</a></h2><!--記事のタイトル--> <h2><a href="#">記事のタイトル２</a></h2><!--記事のタイトル--> <h2><a href="#">記事のタイトル３</a></h2><!--記事のタイトル--> </section>
そこに、管理画面で投稿した内容を反映させるため、
ループの記述を追記し、パーマリンクタグやタイトルタグを挿入していきます。
<section> <?php if ( have_posts() ) : ?><!--ループの記述--> <?php while( have_posts() ) : the_post(); ?><!--ループの記述--> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2><!--記事のタイトル--> <?php endwhile;?><!--ループの記述--> <?php endif; ?><!--ループの記述--> </section>
※記事のパーマリンクを生成するタグ
<?php the_permalink(); ?>
※記事のタイトルを生成するタグ
<?php the_title(); ?>
ここでサイトを表示させると、
このように、投稿した記事のタイトルと、それぞれの記事へのリンクが反映されます。
さらに、先ほど作成したheader.phpとfooter.phpを表示させるタグを追記します。
<?php get_header(); ?><!--header.phpの呼び出し--> <section> <?php if ( have_posts() ) : ?><!--ループの記述--> <?php while( have_posts() ) : the_post(); ?><!--ループの記述--> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2><!--記事のタイトル--> <?php endwhile;?><!--ループの記述--> <?php endif; ?><!--ループの記述--> </section> <?php get_footer(); ?><!--footer.phpの呼び出し-->
※共通ヘッダーを呼び出すタグ
<?php get_header(); ?>
※共通フッターを呼び出すタグ
<?php get_footer(); ?>
ここでサイトを表示させると、
このように、共通ヘッダーと共通フッターが表示されるようになります。
single.php
このファイルは、現在TOPページに表示されているタイトルをクリックした際に遷移する
記事詳細ページを表示させるファイルになります。
こちらのファイルでもTOPページと同様、
ループの記述と、共通ヘッダー、共通フッターを表示させるタグ、
さらに、記事の本文を表示させるタグを追記します。
<?php get_header(); ?><!--header.phpの呼び出し--> <section> <?php if ( have_posts() ) : ?><!--ループの記述--> <?php while( have_posts() ) : the_post(); ?><!--ループの記述--> <h2><?php the_title(); ?></h2><!--記事のタイトル--> <p><?php the_content(); ?></p><!--記事の本文--> <?php endwhile;?><!--ループの記述--> <?php endif; ?><!--ループの記述--> </section> <?php get_footer(); ?><!--footer.phpの呼び出し-->
記事の本文を生成するタグ
<?php the_content(); ?>
ここでTOPページのタイトルリンクをクリックすると、
このように、記事の本文が追加された詳細ページが表示されるようになります。
まとめ
以上、WordPress自作テーマの基本的な構造をご紹介いたしました。
これをもとに肉付けしてcssでデザインを整えて、
サイトが完成していくわけですね。
次回以降は固定ページの作成やカテゴリーごとの表示など、
より細かい機能まで解説していきたいと思います。
それでは、さようなら。
