カンタンWordpress #05「固定ページの構築」

2023年1月16日

Tips Wordpress 特集

eyecatch 何故Wordpressを使いたがるのか?と、制作を依頼してくる人に聞いてみた所、次のような答えが多く返ってきました。
「知り合いに勧められたから」 「公開後に自分でページを編集したい」 「運用コストを出来る限り抑えたい」
お金を出して制作をしてもらった制作会社に、運用管理をお願いしてもいいが、細かいページ編集まで作業コストを支払って行いたくないというのも、よく理解できます。 Wordpressの様なCMSは、そもそもそうした用途の為にあるんですからね。 編集対応ができないCMSを、静的ページで作るぐらいなら、HTMLだけをサーバーに設置した方がよほど効率的だし、色々なメリットもありますからね。 というわけで、今回はそういう編集できるWebサイトをWordpressで構築できるように、固定ページを登録してみたいと思います。

複数の固定ページを作成

今回の学習シリーズでは、webデザインは基本的にやらずに、Wordpressの機能だけを学習するので、簡単に固定ページをいくつか作ってみましょう。 作成する固定ページは、次の4つほどにしたいと思います。 ※思いつくままに追加してもらっても大丈夫です。
  • トップページ
  • 概要
  • お知らせ
  • お問合せ
名称も正直どうでもいいんですが、ページタイトルをそのままページ切り替えのメニューリストになるようにするのがポイントです。

メニューから固定ページ - 新規登録を選択

クラシックエディタの編集画面が表示される

HTMLタグやCSSのための属性を入力したいので、テキストモードに切り替える

パーマリンクを書き換える

ページタイトルを入力すると、パーマリンクが表示されます。 「編集ボタン」を押して、適宜切り替えてください。 今回はよくある設定パターンとして、半角英字をセットします。

公開ボタンを押す

肝心の内容部分のHTMLは、今回は表示が分かる程度の簡易なモノを登録しておきます。

同じ手順で4ページ分登録する

画像の様に4ページ分登録できたら、ひとまず固定ページ登録は完了です。 並び順などは気にしなくても大丈夫です。 デフォルトで「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(); } 無事にコンテンツ表示もできるようになりました。 メニューのリンクをクリックして、他のページのコンテンツも表示されることを確認しておきましょう。 今回は、手順が多かったですが、以上です。