HOME  /WordPress(初級)
 /Twenty Twelveのカテゴリ表示に固定ページを利用する
2020年03月27日

Twenty Twelveのカテゴリ表示に固定ページを利用する


 ­メモ

このドキュメントは2016年の初期サイトの時に作成したドキュメントです。

WordPressが全然わからない状態から、とりあえず動く状態まで持っていったやり方を記述しています。

ある程度判っている方は応用編を参照してください。

現在サイトはこの応用編の技術で作成されています。

Twenty twelve の一覧表示を抜粋表示に変更するで、カテゴリページも抜粋表示に変更しましたが、この表示方法では一覧が表示されるだけで何処にどの様なドキュメントが記述されているかが良く分かりません。

そこでカテゴリ解説を固定ページに書き、カテゴリページの表示の時にこの固定ページを表示させる方法があります。

やり方の手順は下記になります。

1.カテゴリの説明ページを固定ページで作成する

2.カテゴリの説明ページを読み出すプログラムを作成する。

1.カテゴリの説明ページを固定ページで作成する

例えばこのWebサイトは、カテゴリ表示用に下記にような固定ページを作成しています。

1.固定ページの新規作成を実行する

2.ドキュメントタイトルを設定する

ドキュメントタイトルはどのような名前でも良いです。
私は右記のルールで名前をつけています。『カテゴリ(カテゴリのスラッグ名)』
例)カテゴリ(WordPress)

3.パーマリンクのスラッグ名は必ず英字で記述する。

私は『disp-カテゴリのスラグ名』のルールでパーマリンクの設定をしています。

例)dsip-wordpress

4.保存方法は『未公開』で保存する。

公開状態の編集を指定し、非公開を選択し『OK』を挿入する。

非公開にする理由は、このドキュメントはプログラムで呼び出すため通常の固定ページではない為です。
しかし当然、公開ページにしてもプログラム的には問題はありません。
カテゴリページを公開にした場合は検索エンジンから見られることを想定して表示方法を設計してください。

5.更新ボタンを挿入後、短縮URLボタンを挿入して、ドキュメントIDを控えておく。

下記画面が表示されますので、番号を控えておいてください。あとで使います。

6.カテゴリの説明ドキュメントを作成する

このドキュメントに、画像を張り付けたり、文書や投稿ページへのリンクを張り付け、このカテゴリを説明するドキュメントを作成します。

2.カテゴリの説明ページを読み出すプログラムを作成する。

1.カテゴリ表示の仕組みを理解する

カテゴリが選択には下記種類があります。

①メニュやウィジェットでカテゴリがクリックされた時

②パンくずでカテゴリがクリックされた時

この時に表示用に使われるプログラムの優先順位は下記になります。

category-カテゴリ名.phpというプログラムがあるとこのプログラムが動きます。

②上記プログラムがないとcategory.phpが使われます。

よって①のプログラムで固定ページを表示すれば、このページをカテゴリ解説ページにする事ができます。

2.『category-カテゴリのスラッグ名』のプログラムを作成する

それではカテゴリがwordpressのプログラムを作成していきます。

1.category-wordpress.phpのプログラムを作ってください。

作り方は何れかのphpをコピーして名前を変更しても、新規作成でも構いません。

ファイルの格納場所は下記になります。
<WordPressのサイト名>→wp-content→themes→twentytwelve_child→category-wordpress.php

2.上記ファイルに下記のプログラムを書き込んで下さい。

<?php get_header(); ?><!-- ヘッダーの出力-->
<!-- 本文の出力-->
<div class='site-content-w'> 
<!-- 最終更新年月日を本文の前に追加 ------------------------------------------------------------>
<p> <i class='fa fa-clock-o'></i>【<?php  the_modified_date('Y年m月d日'); ?>】</p>
<!---------------------------------------------------------------------------------------------->
 <?php /* 固定ページを読み込んで表示する */
 $data = get_page_by_path('disp-wordpress');
 echo '<div class="entry-content">'.apply_filters('the_content', $data->post_content).'</div>'; 
 ?>
 <footer class="entry-meta">
 <?php edit_post_link( '編集', '<', '>','698'); ?>
 </footer>
</div>
<?php get_footer(); ?><!-- フッターの出力-->

【解説】

<?php get_header(); ?>

 ヘッダーを出力します。

<div class=’site-content-w’>

広幅の描画エリアを使うという宣言です。

<p> <i class=’fa fa-clock-o’></i>【<?php the_modified_date(‘Y年m月d日’); ?>】</p>

最終更新日を本文の前に出力します。

$data = get_page_by_path(‘disp-wordpress‘); ※重要

disp-wordpressは呼び出す固定ページのスラッグ名です。

別のカテゴリプログラムの場合は、ここが変わります。

echo ‘<div class=”entry-content”>’.apply_filters(‘the_content’, $data->post_content).'</div>’;

④で読み出したデータを出力します。

出力データは『entry-content』のクラスを使います。

<?php edit_post_link( ‘編集’, ‘<‘, ‘>’,’698′); ?> ※重要

<編集>のリンクを表示し、飛び先はドキュメントの698番に飛べ!という指示です。

698番は1項の5.で取得したドキュメント番号です。

別のカテゴリプログラムの場合は、ここが変わります。

<?php get_footer(); ?>
    フッタを出力します。

3.表示を確認する

以上の設定でメニューからwordpressを選択してもウィジェットのカテゴリのwordpressを選択しても、固定ページのカテゴリの解説ページが表示されるようになります。

確認してください。  

 

 

<ドキュメントガイド>

前のテーマ:Twenty Twelveの固定ページのカスタマイズ

次のテーマ:Contact Form 7のインストールとメール設定

以上でこのドキュメントの説明は完了です。

関連ドキュメントは下記の関連記事一覧から探して下さい。


<関連記事一覧>

「wordpress」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

WordPressをインストールするとディフォルトではサイトURLはドメイン名/WordPressフォルダになります。これをドメイン名だけにする為にSynologyの仮想ホスト機能を使います。本ドキュメントはこの使い方を解説しています。

WordPressの動作環境を変更すると、DBをダイレクトに変更しなければならないケースがあります。このドキュメントはphpMyAdminのエクスポートとインポートを使って修正した事例を紹介しています。

ここではSynoligyサーバを「Hyper Backup」アプリケーションで、Googleドライブにバックアップ/リストアする方法を解説しています。

Synologyを複数台持っている場合は、Synology間でバックアップを相互に持たせる事ができます。ここではその方法を解説しています。

SynologyのMariaDBから、mysqldumpを使ってDBを定期的にダンプする方法と、それを利用してWordPressを過去の時点に戻す方法を解説しています。

フロントページやカテゴリページを使って最終的なメニュ構成を作成する方法を紹介しています。

Contact Form 7では確認用のe-mailアドレスをチェックする方法がありません。このドキュメントはContact Form 7のフィルターフックの機能をfunctions.phpに記述する事によりこれを可能にする方法を紹介しています。

固定ページに必要なのは、読者からの問い合わせを受けるメールフォームです。これを実現する為に『Contact Form 7』のインストールと設定、更にメールを送るためのSMTPとして、『WP-Mail-SMTP』のインストールと設定事例を紹介しています。

このドキュメントは投稿ページと固定ページの違いや固定ページのプログラム構造を説明し、この固定ページを広幅表示に変更するための具体的カスタマイズ方法を紹介し更に固定ページのタイトルを非表示にする方法も解説しています。

Twenty twelve 投稿ページには各種の一覧ページがありこの表示方法に全文表示と抜粋表示があります。その中で検索ページは抜粋表示ですがそれ以外は総て全文表示になっています。このドキュメントは一覧表示の物は総て抜粋表示にする方法が記載されています。

ヘッダーはWEBサイトの顔になりますがTwenty Twelveのヘッダーは貧弱です。ヘッダーはタイトル、説明及びメニューから構成されており、このドキュメントはこれらをカスタマイズする方法が記載されています。

このドキュメントはウィジェットエリアの考え方とCSSを編集して少し見栄えの良いウィジェットエリアする方法を解説しています。

一般のテキストボックスを使ってPHP/HTMLソースを記述するとhttp画面で正しく表示されない問題が発生します。
このドキュメントはTinyMCE Advancedに整形済みテキスト(preformatted text)を使ったボックスを作成する方法を紹介しています。

このドキュメントはsingle.phpとcontent.phpをカスタマイズし、投稿ページの<前の記事><次の記事>のリンクを削除。メタ情報はカテゴリと投稿日を削除し編集のみとし、最後に記事タイトルの前に更新日をいれ、記事タイトルを装飾した事例です。

Twenty Twelve のフッターには『Proudly powered by WordPress』という文字が出力されます。これを通常サイトの様に『Copyright表現』に変更する方法を記載しています。

本ドキュメントではBreadcrumb NavXTのインストールからそれを表示させる為のheader.php及びCSSの編集方法と表示されたパンくずリストをビジュアルアイコンを使ってよりビジュアルにする方法を説明しています。

アイコンも文字を使ったWEBサイトをよく目にしますが、WPのビジュアルエディタで使えるプラグインが『WordPress Visual Icon Fonts』です。このドキュメントには、インストールの仕方と簡単な使い方を紹介しています。

このドキュメントはTinyMCEのビジュアルエディタとhttp画面を一致させる設定や、見出しや段落等のテキストエリア要素の設定、テキストボックスの新設方法、及び表がビジュアルエディタで利用できる設定等TinyMCEの使いこなす為のテクニックを紹介しています。

このドキュメントはCSSのカスタマイズ編です。内容はTwenty Twelveの画面構成解説、子テーマの作り方、CSSを編集する際の注意点、具体的なCSSカスタマイズ事例。事例はスマートデバイスにも対応させる為に%指定をしています。

本投稿はTwenty Twelveの投稿のカテゴリ設定や文書の作成について事例と注意点を記載しています。

WordPressをインストールする時に、ログインユーザ名を指定しますが、デフォルトのままではブログの表示名も上記ログインユーザ名が使われます。これを変更する方法を解説しています。

WordPressをインストールして、WPのテーマを『Twenty Twelve』決めた次に悩んだのは、ダッシュボードにある『設定』をどの様に設定したら良いか?です。本ドキュメントではこのWEBサイトの設定をどの様にしたのか?を解説しています。

本サイトのWordPressのテーマは、Twenty Twelveで構築しました。本ドキュメントでは何故、このテーマを選択したのか?の背景と設定方法を解説しています。

WordPressのCSSファイルやPHPファイルを編集する為には『UTF-8 の BOM なし』のテキストエディタが必要になります。本稿ではこのサイトで使っているEmEditor Free版の利用事例を紹介しています。

SynologyのWordpressパッケージをインストールする方法を解説しています。

画像を取り込むツールとしてOnePerss Image Elevator、サムネールの再構築にRegenerate Thumbnailsを利用しています。このドキュメントは画像に関するツールと管理方法について解説しています。

SynologyのNASに日本語版WordPressをインストールするやり方を解説しています。複数のWordPressも同一手法で稼動させることができます。