WordPressのテーマ作成（応用編その1）
■WordPressのテーマ作成（基礎編）よりも現実のサイトに近いテーマの作成方法
「メニュー」、「アイキャッチ画像」、「個別の投稿記事」、「404エラーページ」の設定を中心に解説する
基礎編同様に環境はWindowsのローカル開発環境
WordPressのテーマ作成（基礎編）はこちら → WordPressのテーマ作成（基本編）
①下記ファイルを格納した「wp_test_ver2」を用意し、WordPressの「Themes」フォルダ直下に格納
・header.php
・index.php
・footer.php
・style.css
・functions.php
【header.php】
<!-- header.php -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>title</title>
<?php wp_head(); ?>
</head>
<body>
<div id="header">
<div class="container">
<div class="menu_box">
<!-- メニュー記述箇所 -->
</div>
</div>
</div>
【index.php】
<!-- index.php -->
<?php get_header(); ?>
<div id="main">
<div class="container">
<!-- メイン処理記述箇所 -->
</div>
</div>
<?php get_footer(); ?>
【footer.php】
<!-- footer.php -->
<div id="footer">
<div class="container">
<!-- コピーライト記述箇所 -->
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>
【functions.php】
<!-- functions.php -->
<?php
//CSSの呼び出し
function load_stylesheet() {
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'load_stylesheet');
【style.css】
/* style.css */
/*
Theme Name: wp_test_ver2
Theme URI: 192.168.33.10
Author: dbuser
Author URI: 192.168.33.10
Description: WordPress
Version: 1.0
*/
body {
font-size: 14px;
}
②テーマを有効化
③カテゴリー作成
管理画面の「投稿」⇒「カテゴリー」を押下し、任意のカテゴリー名を入力して「新規カテゴリーを追加」を押下
※ここではカテゴリー名に「海外旅行」と「国内旅行」を追加している
④固定ページ作成
管理画面の「固定ページ」⇒「新規追加」を押下し、タイトルと内容を入力して「公開」を押下
⑤メニューの作成
WordPressの管理画面からメニューを編集できるようにする為に「functions.php」に「add_theme_support(‘menus’);」の記述を追加
<!-- functions.php -->
<?php
//CSSの呼び出し
function load_stylesheet() {
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'load_stylesheet');
//管理画面にメニューを表示
add_theme_support('menus');
「外観」内に「メニュー」が表示される
「メニュー」を押下し、メニュー画面で任意の名前でメニューを作成
④で作成した固定ページをメニューに追加
③でカテゴリーをメニューに追加
カスタムリンクでホーム（URL:192.168.33.10）を作成し、ドラッグして「会社概要」の上に移動後、「メニューを保存」を押下
「header.php」に作成したメニューを呼び出す為に「<?php wp_nav_menu(); ?>」を記述する
<!-- header.php -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>title;</title>
</head>
<body>
<div id="header">
<div class="container">
<div class="menu_box">
<!-- メニューを呼び出す -->
<?php wp_nav_menu(); ?>
</div>
</div>
</div>
style.cssでスタイルを整えた後のサイト
⑥アイキャッチ画像画像を表示
「themes」フォルダと同じ階層に「uploads」フォルダを作成する（パーミッションは777）
WordPressの管理画面からアイキャッチ画像を設定できるようにする為に「functions.php」に「add_theme_support(‘post-thumbnails’);」の記述を追加
<!-- functions.php -->
<?php
//CSSの呼び出し
function load_stylesheet() {
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'load_stylesheet');
//管理画面にメニューを表示
add_theme_support('menus');
//管理画面にアイキャッチ画像の設定を表示し、そのページのリンクを貼る
add_theme_support('post-thumbnails');
投稿画面の右下にアイキャッチ画像の設定メニューが表示されるので、アイキャッチ画像を設定して投稿記事を作成
「the_post_thumbnail(array(横幅, 縦幅));」でアイキャッチ画像を表示
<!-- index.php -->
<?php get_header(); ?>
<div id="main">
<div class="container">
<!-- WordPressの決まり文句 -->
<?php
if (have_posts()):
while (have_posts()):
the_post();
?>
<div class="posts">
<!-- タイトルを表示 -->
<h2><?php the_title(); ?></h2>
<div class="thumbnail">
<!-- リンク付きでアイキャッチ画像を表示 -->
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(300,150)); ?></a>
</div>
<div class="post">
<!-- 投稿記事の一部を表示 -->
<?php the_excerpt();?>
</div>
</div>
<?php
endwhile;
endif;
?>
</div>
</div>
<?php get_footer(); ?>
style.cssでスタイルを整えた後のサイト
⑦個別の投稿記事を表示
「index.php」のベースに「single.php」を作成
アイキャッチ画像部分は削除し、「the_excerpt();」を「the_content();」に変更
その他、クラス名を適宜変更
<!-- single.php -->
<?php get_header(); ?>
<div id="main">
<div class="container">
<!-- WordPressの決まり文句 -->
<?php
if (have_posts()):
while (have_posts()):
the_post();
?>
<!-- タイトルを表示 -->
<h2><?php the_title(); ?></h2>
<div class="post_single">
<!-- 投稿記事を表示 -->
<?php the_content();?>
</div>
<?php
endwhile;
endif;
?>
</div>
</div>
<?php get_footer(); ?>
style.cssでスタイルを整えた後のサイト
アイキャッチ画像を押下して個別の投稿記事を表示
⑧該当ページが無い場合、404エラーページに遷移する設定をする
「themes」フォルダ内に「404.php」ファイルを作成し、格納
【404.php】
<!-- 404.php -->
<?php get_header(); ?>
<div id="main">
<div class="container">
<div class="not_found">
<h3>該当のページは存在しません</h3>
<div class="return_home">
<a href="<?php echo home_url(); ?>">トップページに戻る</a>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>
スタイルを整えて完成
