今回はHTMLのように簡単に下層ページが作れると思ってたのに、ルールが難しくて躓いてしまった方向けの記事です！WordPressのオリジナルテーマで下層ページを作成する方法についてシンプルにわかりやすくお伝えします！コピペ＆若干の編集でそのまま使えるので、一緒に頑張りましょう！！
前提条件、環境
・dockerなどを使ってローカルでWordPress開発していてコード編集をしたらすぐに更新される
・VSCODEのエディターを使用している
・WordPressの基礎構成を知っている
以上二つの事が出来ていれば基本的に誰でもできます！
１.functions.phpに下記のコードを追加
まずはfunctions.phpに下記のコードを追加してみましょう！
<?php
function create_custom_page() {
$pages = array(
array('title' => 'BLOG', 'template' => 'page-blog.php'), //blog用固定ページ
array('title' => 'ABOUT', 'template' => 'page-about.php'), //about用固定ページ
);
foreach ($pages as $page) {
$existing_page = get_page_by_title($page['title']);
if (!$existing_page) {
$new_page = array(
'post_title' => $page['title'],
'post_content' => '',
'post_status' => 'publish',
'post_author' => 1,
'post_type' => 'page',
'post_name' => $page['title'],
'page_template' => $page['template']
);
wp_insert_post($new_page);
}
}
}
add_action('after_setup_theme', 'create_custom_page');
?>追加したら管理画面に戻り、サイトをリロードして固定ページを確認すると、、、
固定ページにBLOG用とABOUT用のページが作られています！ちなみにゴミ箱に移動して完全消去後サイトリロードすると自動でページが再生成されるので試してみると面白いかも！(注意点として、ごみ箱に入れたまま完全削除しないと再生成されないのでご注意ください。)
また、下記のように追加すれば必要なページ分だけいくつでも作れるので、自分のサイトに合わせて追加しましょう！
array('title' => 'BLOG', 'template' => 'page-blog.php'), //blog用固定ページ
array('title' => 'ABOUT', 'template' => 'page-about.php'), //about用固定ページ
array('title' => 'NEWS', 'template' => 'page-news.php'), //news用固定ページ２.編集用のページを作成
次に先ほどfunctions.phpに書き込んだコードのtemplateを参考にファイルを作成してみましょう！
array('title' => 'BLOG', 'template' => 'page-blog.php'), //blog用固定ページ
array('title' => 'ABOUT', 'template' => 'page-about.php'), //about用固定ページtitle =>BLOGのtemplateがpage-blog.phpなのでpage-blog.phpを作成。
title =>ABOUTのtemplateがpage-about.phpなのでpage-about.phpを作成。
画像のようにpage-blog.phpとpage-about.phpが作成出来ていれば大丈夫です！
これで、編集用のページも作成できたので、後はそれぞれの固定ページに紐づけるだけです！
3.固定ページと作成した編集用ページの紐づけ！
では、固定ページと編集用のページを紐づけしていきましょう！
page-blog.phpとpage-about.phpを編集していきます！
1.page-blog.php
<?php
/*
Template Name: page-blog
*/
?>
<!-- headerの呼び出し -->
<?php get_header(); ?>
<!-- blog -->
<h2>blogのhtml内容などはここに書く</h2>
<h2>blogのhtml内容などはここに書く</h2>
<!-- footerの呼び出し -->
<?php get_footer(); ?>2.page-about.php
<?php
/*
Template Name: page-about
*/
?>
<!-- headerの呼び出し -->
<?php get_header(); ?>
<!-- about -->
<h2>aboutのhtml内容などはここに書く</h2>
<h2>aboutのhtml内容などはここに書く</h2>
<!-- footerの呼び出し -->
<?php get_footer(); ?>これで紐付けが終わりました！後はheaderを編集してページ遷移できるように作っていきましょう！
(headerのcssはよしなに調整してください！)
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="<?php echo get_theme_file_uri('css/style.css'); ?>">
<link rel="stylesheet" href="<?php echo get_theme_file_uri('style.css'); ?>">
<title><?php wp_title(); ?>SOLVIDE・ホームページ制作</title>
<?php wp_head(); ?>
</head>
<body class="body">
<header class="Newheader">
<nav class="Newheader__cnt">
<a href="<?php echo esc_url(home_url('/ABOUT')); ?>" class="Newnav-list Nl1">私たちについて</a>
<a href="<?php echo esc_url(home_url('/BLOG')); ?>" class="Newnav-list Nl3">ブログ</a>
</nav>
</header>ちなみに遷移する際のリンクはfunctions.phpに書いたtitle =>を指定しましょう！
<a href="<?php echo esc_url(home_url('/ABOUT')); ?>" class="Newnav-list Nl1">私たちについて</a>
<a href="<?php echo esc_url(home_url('/BLOG')); ?>" class="Newnav-list Nl3">ブログ</a>array('title' => 'BLOG', 'template' => 'page-blog.php'), //blog用固定ページ
array('title' => 'ABOUT', 'template' => 'page-about.php'), //about用固定ページ4.パーマリンクの設定
設定 -> パーマリンクからパーマリンクを基本から投稿名に変更して変更を保存しましょう！
5.ページ遷移の確認
最後にページ遷移の確認をしましょう！サイトのトップページから私たちについて(aboutページ)を押してみましょう
home画面
aboutページ
次にブログページに移動してみましょう！
blogページ
どちらも上手く遷移出来たら成功です！
