何故Wordpressを使いたがるのか？と、制作を依頼してくる人に聞いてみた所、次のような答えが多く返ってきました。
「知り合いに勧められたから」
「公開後に自分でページを編集したい」
「運用コストを出来る限り抑えたい」
お金を出して制作をしてもらった制作会社に、運用管理をお願いしてもいいが、細かいページ編集まで作業コストを支払って行いたくないというのも、よく理解できます。
Wordpressの様なCMSは、そもそもそうした用途の為にあるんですからね。
編集対応ができないCMSを、静的ページで作るぐらいなら、HTMLだけをサーバーに設置した方がよほど効率的だし、色々なメリットもありますからね。
というわけで、今回はそういう編集できるWebサイトをWordpressで構築できるように、固定ページを登録してみたいと思います。
複数の固定ページを作成
今回の学習シリーズでは、webデザインは基本的にやらずに、Wordpressの機能だけを学習するので、簡単に固定ページをいくつか作ってみましょう。
作成する固定ページは、次の４つほどにしたいと思います。
※思いつくままに追加してもらっても大丈夫です。
名称も正直どうでもいいんですが、ページタイトルをそのままページ切り替えのメニューリストになるようにするのがポイントです。
メニューから固定ページ - 新規登録を選択
クラシックエディタの編集画面が表示される
HTMLタグやCSSのための属性を入力したいので、テキストモードに切り替える
パーマリンクを書き換える
ページタイトルを入力すると、パーマリンクが表示されます。
「編集ボタン」を押して、適宜切り替えてください。
今回はよくある設定パターンとして、半角英字をセットします。
公開ボタンを押す
肝心の内容部分のHTMLは、今回は表示が分かる程度の簡易なモノを登録しておきます。
同じ手順で４ページ分登録する
画像の様に４ページ分登録できたら、ひとまず固定ページ登録は完了です。
並び順などは気にしなくても大丈夫です。
デフォルトで「Privacy Policy」というページが登録されていますが、これも使いたいと思うので、公開しておきましょう。
「sample」ページは、使わないので、削除してもらっても構いません。
トップページをRootページにセット
登録した固定ページのうち、トップページを、サイトにアクセスした時のRootページにセットします。
外観 - カスタマイズを選択
ホームページ設定をクリック
固定ページを選択して、トップを選択
このまま、画面の左上の戻るボタンで戻って次の作業に進んでください。
ヘッダメニューで固定ページをセット
次にやることは、登録した固定ページを、ホームページのヘッダメニューに表示したいと思います。
表示する固定ページは、Wordpressの管理画面で調整出来るようにすることで、新しく作ったページや古くなったページの出し入れがしやすくなります。
メニューをクリック
メニューを新規作成をクリック
ヘッダメニューの作成
「ヘッダメニュー」と入力して、「次」ボタンをクリック
項目を追加ボタンをクリック
パネルが右に増えて、次のような表示になります。
トップ、概要、お問合せを追加する
右側のパネルに先程登録した固定ページの一覧が表示されているので、登録をしたい項目をクリックすると、左側のメニュー一覧に追加されます。
順番を変えたい場合は、ドラッグして移動できます。
「公開」ボタンを押して完了
ボタンが「公開済み」になれば、×ボタンを押して終了してください。
header.phpの更新
登録したメニューを反映させるために、次のようにプログラムを更新します。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<title><?php echo get_bloginfo('name');?></title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="icon" href="<? echo get_site_icon_url();?>" />
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"/>
<script src="<?php echo get_template_directory_uri();?>/js/main.js"></script>
</head>
<body>
<header>
<a class='title-area' href='/'>
<div class='catch gothic'><?php echo get_bloginfo('description');?></div>
<div class='title mincho bold'>
<img class='logo' src='<?php echo get_template_directory_uri();?>/img/logo.svg'>
<?php echo get_bloginfo('name');?></div>
</a>
<nav>
<input id='menu_toggle' type='checkbox' style='display:none;'>
<ul>
<?php
$menus = wp_get_nav_menu_items('ヘッダメニュー');
if(!$menus){return;}
$html = '';
foreach($menus as $data){
$html .= '<li>';
$html .= '<a href="'. $data->url .'">';
$html .= $data->title;
$html .= '</a>';
$html .= '</li>'.PHP_EOL;
}
echo $html;
?>
</ul>
<label for='menu_toggle'>
<span></span>
<span></span>
<span></span>
</label>
</nav>
</header>
<main>
今回追加したのは、次の部分です。
<?php
$menus = wp_get_nav_menu_items('ヘッダメニュー');
if(!$menus){return;}
$html = '';
foreach($menus as $data){
$html .= '<li>';
$html .= '<a href="'. $data->url .'">';
$html .= $data->title;
$html .= '</a>';
$html .= '</li>'.PHP_EOL;
}
echo $html;
?>
解説
wp_get_nav_menu_items('メニュー名')
上記で登録したメニュー名称で、メニュー欄が検索できます。
同じ手順でフッタにメニューを挿入したり、サイドメニューなどを追加できたりします。
表示
この状態でサイト表示してみると、上記のように表示されます。
cssで、ヘッダメニューを調整すれば、ヘッダメニューの調整はできそうですね。
ちなみに、メニューが回送表示にしたい場合は、カスタマイズの所で追加したメニューをドラッグすると、階層構造にすることができるので、それをwp_get_nav_menu_items関数で取得したデータで階層構造になっているのをHTMLに出力してあげればいいだけですね。
（ちょっと難しいケド）
固定ページのコンテンツ部分の表示
最後に、肝心のコンテンツ部分の表示をするために、functions.phpを次のように更新します。
<?php
function get_content(){
// サイトトップページ
if(is_front_page()){
echo view_page();
}
// 固定ページ
else if(is_page()){
echo view_page();
}
// 投稿ページ
else if(is_single()){
echo view_page();
}
// 投稿一覧ページ
else if(is_home()){
echo view_posts();
}
// 検索ページ
else if(is_search()){
echo view_search();
}
}
function view_page(){
the_content();
}
function view_posts(){
return '投稿一覧ページ';
}
function view_search(){
return '検索ページ';
}
変更点は、次の箇所のみです。
function view_page(){
the_content();
}
無事にコンテンツ表示もできるようになりました。
メニューのリンクをクリックして、他のページのコンテンツも表示されることを確認しておきましょう。
今回は、手順が多かったですが、以上です。
