![eyecatch](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrgHfXU3wm4zFcxoW6y02ps6OgQkpIS6L_wddXR1gEzQbSRTdZkh_J5Tg0OXb1_b5LhlXDyvn9EAULc4SKB8zLPJKhzZdefX9i2GHng2VH--VIO0whz1i8XrpcXH4AEE5Cs-x9TIDFrgGnnsxr4_WBukjWG0OFf1VRdEHgouNTpj4LePLAi1VlkHjT/s1600-rw/wordpress.png)
何故Wordpressを使いたがるのか?と、制作を依頼してくる人に聞いてみた所、次のような答えが多く返ってきました。
「知り合いに勧められたから」
「公開後に自分でページを編集したい」
「運用コストを出来る限り抑えたい」
お金を出して制作をしてもらった制作会社に、運用管理をお願いしてもいいが、細かいページ編集まで作業コストを支払って行いたくないというのも、よく理解できます。
Wordpressの様なCMSは、そもそもそうした用途の為にあるんですからね。
編集対応ができないCMSを、静的ページで作るぐらいなら、HTMLだけをサーバーに設置した方がよほど効率的だし、色々なメリットもありますからね。
というわけで、今回はそういう編集できるWebサイトをWordpressで構築できるように、固定ページを登録してみたいと思います。
複数の固定ページを作成
今回の学習シリーズでは、webデザインは基本的にやらずに、Wordpressの機能だけを学習するので、簡単に固定ページをいくつか作ってみましょう。
作成する固定ページは、次の4つほどにしたいと思います。
※思いつくままに追加してもらっても大丈夫です。
名称も正直どうでもいいんですが、ページタイトルをそのままページ切り替えのメニューリストになるようにするのがポイントです。
メニューから固定ページ - 新規登録を選択
クラシックエディタの編集画面が表示される
HTMLタグやCSSのための属性を入力したいので、テキストモードに切り替える
パーマリンクを書き換える
ページタイトルを入力すると、パーマリンクが表示されます。
「編集ボタン」を押して、適宜切り替えてください。
今回はよくある設定パターンとして、半角英字をセットします。
公開ボタンを押す
肝心の内容部分のHTMLは、今回は表示が分かる程度の簡易なモノを登録しておきます。
同じ手順で4ページ分登録する
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWgqXx_edzXvyWPyqonmhdY9Xut_bPBwS6yxhbdEUi34ZY5H2j3O6ZECtiFLzVK48oi26ClDHRvoNZOnzGHCcGrVg5i-CAcfgAUPAlMHcKLL4SEoxvxh6Kt769jXgCynxxHtAZ8F7K3FYebB48jiGJ1_g8TTkDuyXkfYBUlBPSxBVwdEajl7zhLYq/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-01-12%2011.59.00.png)
画像の様に4ページ分登録できたら、ひとまず固定ページ登録は完了です。
並び順などは気にしなくても大丈夫です。
デフォルトで「Privacy Policy」というページが登録されていますが、これも使いたいと思うので、公開しておきましょう。
「sample」ページは、使わないので、削除してもらっても構いません。
トップページをRootページにセット
登録した固定ページのうち、トップページを、サイトにアクセスした時のRootページにセットします。
外観 - カスタマイズを選択
ホームページ設定をクリック
固定ページを選択して、トップを選択
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKLVUkjoqRpvZ6CSvoHc19BcWHO-FpTQK6mvctPBIW-POeQF9LpAMWoWZLL2RigRH5EHqNKEhn5r5UvFKcSlOLLJSXGvfyA_zGwnpwo7XBmMb0Osjfg9btgbSH2O7j5aIY1AaAsWF8G0GnMYjFN2tECJr4VOIE_DiL1Js6aLgPLGMIealfWmZJlvkt/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-01-12%2014.09.30.png)
このまま、画面の左上の戻るボタンで戻って次の作業に進んでください。
ヘッダメニューで固定ページをセット
次にやることは、登録した固定ページを、ホームページのヘッダメニューに表示したいと思います。
表示する固定ページは、Wordpressの管理画面で調整出来るようにすることで、新しく作ったページや古くなったページの出し入れがしやすくなります。
メニューをクリック
メニューを新規作成をクリック
ヘッダメニューの作成
「ヘッダメニュー」と入力して、「次」ボタンをクリック
項目を追加ボタンをクリック
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFmXSoVKBoEqo5DuPedq_qPaDgZFlQ69obQPe0LHtvrlrKw_I_PjBWqUqd0n6XP-xALLTXBpna7_YRullJ3HxfXxfhOXEJNOTsr_GsmZNZD2z_v7UqUS2vZuUgc3VGByuvvbkH5ytWMkZuS2WQB9jbr4OK0dzp4Fvciv8Oe-3M9iFtLsjTaMxxOQLM/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-01-12%2011.47.52.png)
パネルが右に増えて、次のような表示になります。
トップ、概要、お問合せを追加する
右側のパネルに先程登録した固定ページの一覧が表示されているので、登録をしたい項目をクリックすると、左側のメニュー一覧に追加されます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik89hZSVbziQYlqzvY6u47G2yXjSR1yUbhon8J1mh80hJokuEYH1aDr9-fFKG7saEQ-WgsJ1yy6ErrEl7Yx0KnIPHypYZVhlb5Sc2uf49wxB_BpToKifbaJ1AwZqjDsFO1uinbCjjZLiSIMXawEJmGMLLCoGvg4b1MY5pkwSuVb9KH-m8KAWpbgVor/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-01-12%2013.51.41.png)
順番を変えたい場合は、ドラッグして移動できます。
「公開」ボタンを押して完了
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC7G7xujBcm792qD46tSGFAc0HwnKZZ9pKH3pvXTKWkR9Qo3BhQXA7N3Zb6TNRhBvCHeAkumZga04YjhVftkVbId1VvTyZulpSwbH0gOIVMpE5lYRdvV7bx-dclcXUZZ38ULSEWumJtpYAJ3aFaO3k2zWQonBKfhzDzxCNAJGGrQfq-NE2J0MribmL/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-01-12%2013.58.17.png)
ボタンが「公開済み」になれば、×ボタンを押して終了してください。
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('メニュー名')
上記で登録したメニュー名称で、メニュー欄が検索できます。
同じ手順でフッタにメニューを挿入したり、サイドメニューなどを追加できたりします。
表示
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwET1TEjR60-paXvs6NEFqwZSybTOBJP63cEdxcuzSAvZIWh1klvwsnQTx2RX-rHeUMN1bYfTDBK0-oqFLsq5CwRBB7anqkrIEr9yMQ09lfnW7yeZkr-hPATdxR5ZKPrg4aFFlEhasG0bkqvlSdwwMfujGqOmKFbrlvLelB1tL4UG0zAPJG7PJ_LYG/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-01-12%2013.36.07.png)
この状態でサイト表示してみると、上記のように表示されます。
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();
}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6AvuBMHKqPzSyyENceCROQjnnZNhLAkBAcSIQQpARdmEH4xCEkfBTqlL4IRpQGIKxyxCw-Xlwg7E1WLEBKi1U1ipzsHSfKU50jSzv-PVBNwZGT8ITY3JDks3YJSLCsf56lV2DzRFfPeQToE3q3wf5NY6pfqNjgTp6Pzh8MNoIMI_SnesjiaZElSGF/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-01-12%2014.17.25.png)
無事にコンテンツ表示もできるようになりました。
メニューのリンクをクリックして、他のページのコンテンツも表示されることを確認しておきましょう。
今回は、手順が多かったですが、以上です。
0 件のコメント:
コメントを投稿