学習の記録 1月28日
こんにちは、こんばんは！ひとしです✨
さて、今回もしっかりと WordPress学習、1時間半ほど行いましたのでその記録です。
今回はいつものビジネスサイトを作って学ぶWordPressの教科書から、404ページをオリジナルで表示させる、投稿ページ間のナビゲーションを設置する、抜粋文の文字数を調整して簡潔に見通しをよくする、カスタムテンプレートの作成
4つの項目を勉強しましたので、それぞれの役割と感想を書いていきます！
404ページをオリジナルで表示させる
まず404ページとは何かというとサイトのURLにアクセスしたときにそのページが削除されてたりしたときに出てくるエラーページのことですね。
こんなやつです。
ネット検索してたらたまに見ますね。これをオリジナルのデザインにアレンジするようです。
ではやっていきます。
まずは404.phpというファイルをエディタに作って、そのファイルを修正します。
そしてfunctionsphpでメイン画像上にページが見つかりませんと表示させます。
そして今回は|| is_404()というワードが重要で、こちらは WordPressの条件分岐タグと呼ばれる関数で、404ページが表示されている場合にtrueを返す、という意味のようです。
コードを本の通りに入力して存在しないURL(https://Pacificmall.local/test/)を入力して、リロードします。
すると、ページが見つかりませんというタイトルがメイン画像上に現れました。
以上で、404ページは完了です！次にいきましょう。
投稿ページ間のナビゲーションを設置し、移動を容易にする
続いては投稿ページを表示した際に、前後へのリンクを出力させます。
こんな感じのこれもまたよく見るやつですね。
まずはcontent-single.phpというファイルを作ります。
get_next_post; / get_previous_post
前後の記事データをオブジェクト形式で取得するテンプレートタグだそうです。
記事によっては前後の記事がない場合もあるので、if($next post ）／ if( $prev_post ）で前後の記事が存在するかどうかをチェックしています。この記述がないと、前後の記事が存在しない場合でも、必要のないHTMLが出力されてしまいます。
コードを入力し終えて表示、動作を確認してみます。
どどん🤲
と、はい！無事にボタンがつきました！よし、次行こう！
抜粋文の文字数を調整し、簡潔に見通しを良くする
それぞれのサンプルサイトでは抜粋文が多用されています。その文字数を使用場所に応じて変更することで個々の内容を簡潔に伝えられ、全体を見渡せるようになるとのことです。
よく〇〇字以内で簡潔に述べよ～とかいう国語の問題ありましたよね。あんな感じで簡潔に用件をまとめられるように設定することでしょうか？(笑)
とにかくやっていきましょう。
まずはfunctions.phpを追記していきます。
function cms_excerpt_more() {
return '...';
}
add_filter( 'excerpt_more','cms_excerpt_more' );
function cms_excerpt_length() {
return 80;
}
add_filter( 'excerpt_mblength','cms_excerpt_length' );
このような関数をまず打ち込みます。ソースコードのちょっと意味を調べました。
excerpt_more
抜粋文の最後につく文字列を変更します。
excerpt_mblength
これで文字数をWP Multibyte Patch標準の110文字から80文字に変更します。
では次です。
カスタムページテンプレートを作成する
カスタムページテンプレートとは、通常共通のデザインで構成されてる固定ページのどれかを個別に異なる表示や動作をさせたい場合に使われる特殊なテンプレートのことです。
個別にサイドバーや一部分だけデザインを変えたいときに便利なようです。
ではやっていきます。
まずはいつものようにphpファイルを個別に作成します。今回はpage-shop-detail.phpというファイルを作り、中身を以下のように記述します。
<?php
/*
Template Name: 店舗詳細
*/
get_header();
?>
<div class="page-inner full-width">
<div class="page-main" id="pg-shopDetail">
<div class="lead-inner">
<?php
if ( have_posts() ):
while ( have_posts() ): the_post();
the_content();
endwhile;
endif;
?>
<div class="bg-shop"></div>
</div>
<div class="shopList-Container">
<div class="shopList-head">
<span class="title-en"></span>
<h3 class="title">ショップリスト</h3>
</div>
<div class="shopList-inner">
<ul class="shopList">
<li class="shopList-item">
<div class="shop-image">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/otemachi_cinema.png" alt="" />
</div>
<div class="shop-body">
<p class="shop-title">パシフィックシネマ 大手町 </p>
<p class="shop-caption">
大手町モール35階〜38階にある都内最大級の15のスクリーンを備えている映画館です。大きいものでは700席あるスクリーンから、100席ほどのスクリーンまで様々なタイプのスクリーンで映画をお楽しみいただけます。<br />
IMAX、4DXなど最新の上映も行っております。体全体で感じる映画をお楽しみください。<br />
隣の座席との間隔も広めに設計されているため長時間の鑑賞も快適にお楽しみいただけます。<br />
また、プラチナシート、ファミリーシート、カップルシートなど様々な場面に応じたシートをご用意しております。ご家族で、恋人と、また特別な人へのおもてなしとしてぜひお使いください。
</p>
<div class="shop-detail">
<dl>
<dt>営業時間</dt>
<dd>9:00〜0:00 </dd>
</dl>
<dl>
<dt>フロア情報</dt>
<dd>35階〜38階 シネマフロア</dd>
</dl>
</div>
</div>
</li>
<li class="shopList-item">
<div class="shop-image">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/otemachi_shikou.png" alt="" />
</div>
<div class="shop-body">
<p class="shop-title">和牛専門 「大手町 至高（しこう）」 </p>
<p class="shop-caption">
料理長自ら和牛の買い付けに行き、厳選しているそのこだわり。 その中でも特に上質な最高級和牛の但馬牛（たじまぎゅう）を使います。<br />
和食の枠にとらわれず、料理人の柔軟な発想で、様々な姿でお客様に但馬牛の料理を堪能いただきます。 その芸術的な料理はまさに至高。ここでしか味わえません。ぜひお試しください。
</p>
<div class="shop-detail">
<dl>
<dt>営業時間</dt>
<dd>11:00～22:00（L.O. 21:30） </dd>
</dl>
<dl>
<dt>フロア情報</dt>
<dd>40階 和のフロア</dd>
</dl>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>
すると管理画面にテンプレートという項目が追加され、これを「店舗詳細」に変えて更新します。
するとこれで画面上部のツールバーがpage-shop-detail.phpに変わり、使用されているテンプレートがカスタムページテンプレート用のページに変わります。
続いてはサイドバーを導入していきたいと思います。
まずは「All in One Navi Widget」というプラグインをインストールします。管理画面からプラグインを検索して…
ってまたねぇじゃん！！！！！
なんだよもぅ！使われてないプラグインばっか紹介すんなよ！！！これだからプライムストラテジーの出してる本は！(´Д｀)
って少し口が悪くなってしまいましたが、今回もなければ他の代わりになるプラグインを探します。
（くっ！(´Д｀)）
とりあえずウィジェット関連のプラグインを色々調べて漁ってみる・・・
ない・・前回は何とか代わりのものを見つけることができましたが、今回は見つかりませんでした。仕方ないのでプラグインは諦めてとりあえず本の通りに進めてみることにしました。
とりあえずはfunctions.phpウィジェットエリアを使えるようにします。ウィジェットエリアとは固定の位置にさまざまな情報を容易に出力するためのWordpressの機能のことです。次のように追記します。
function theme_widgets_init() {
register_sidebar( array(
'name' => 'サイドバーウィジェットエリア',
'id' => 'primary-widget-area',
'description' => '固定ページのサイドバー',
'before_widget' => '<aside class="side-inner">',
'after_widget' => '</aside>',
'before_title' => '<h4 class="title">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'theme_widgets_init' );
このように記述すると、管理画面の外観にウィジェットエリアが登録され、ウィジェットの管理が可能になります。
本来であればここのリストに「サブナビ」という項目が追加されるようです。（プラグインをインストールしていれば）しかし本で紹介されているプラグインがないのでここからは勝手な判断でやるしかありません。
画像のように利用できるウィジェットから「最近の投稿」と「固定ページ」を選択し、それぞれサイドバーウィジェットエリアという項目が選択できるので、ウィジェットを追加をクリックします。
そしてウィジェットの設定変更で、「最近の投稿」では表示する投稿数を５，「固定ページ」では並び順を「ページID」にします。
これで保存を押します。
そしてテキストエディタでpage-sidebar.phpというファイルを新たに作成します。そして中身を以下のように記述します。
<?php
/*
Template Name: サイドバーあり
*/
get_header(); ?>
<div class="page-inner two-column">
<div class="page-main" id="pg-company">
<div class="content">
<div class="content-main">
<article class="article-body">
<div class="article-inner">
<?php
if ( have_posts() ):
while ( have_posts() ): the_post();
the_content();
endwhile;
endif;
?>
</div>
</article>
</div>
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>
そしてsidebar.phpという個別のファイルも作り、以下のように記述します。
<div class="content-side">
<div class="side-box">
<?php dynamic_sidebar( 'primary-widget-area' ); ?>
</div>
</div>
そしてこれによって「店舗詳細」同様にpage-sidebar.phpがカスタムページテンプレートとしてWordpressに認識されるので、固定ページ一覧から一部のページを表示してみます。
無事にサイドバーが付いているページが完成しました！！ただプラグインもなしに適当にウィジェットを編集しただけなのでけっこう見にくく不格好なサイドバーですが・・・
まぁプラグインありきでの進め方でしたので、それができないとなると初心者にはどうしようもできず(´Д｀)
けど無事にサイドバーの付け方はわかったのでとりあえずはこのまま次の章を読み進めたいと思います(;´∀｀)
とりあえず今日はここまでにしました。そして疲れたので寝ます（笑）
それではまた次の投稿でお会いしましょう！それでわ！！
