WordPressカスタム #01 投稿ページの増設

WEB制作のお勉強

WordPressに投稿ページを増やしたい…と思い立ち、調べてみるとプラグインで可能だというコトが分かったので早速利用してみました!自分の覚え書きとして以下にHow-toを書いていくとします。(ログを取ってなかったので、順番とか一部やり方に間違いがあるかも…覚え書きなのでご了承ください。) ※PC以外だと見づらい箇所あり!

利用したプラグインは『 Custom Post Style UI 』です。カスタム投稿タイプやカスタム分類を作る便利なプラグインです。

・「プラグイン」→「新規追加」→『Custom Post Type UI』をインストール・有効化します。

・「CPT UI」→「投稿タイプの追加と編集」→ 必要項目の設定をします。(とりあえず必要な5ヶ所だけ)

①「投稿タイプスラッグ」=カスタム投稿のID(半角英数で20文字以内) ChimAの場合→「book」

②「複数形のラベル」=カスタム投稿の表記名(日本語でもOK) ChimAの場合→「BOOK」

③「単数形のラベル」=カスタム投稿の表記名(日本語でもOK) ChimAの場合→「BOOK」

④「アーカイブあり」=『True』を選択。 (初期値:False) アーカイブ一覧表示ページを作るかどうか。通常作るケースが多いので Trueを推奨。(ChimA_PCでは真or偽) アーカイブURLに使うスラッグ欄は無記入でOK。

⑤「サポート」=「なし」以外すべてにチェック!どの機能を有効にするかの設定で、全ての機能を有効化します。

設定項目がありすぎて、初めて使う人には全てを理解するのに時間がかかるとのコトなので、最低限の設定だけして「投稿タイプを追加」します。「BOOK」の項目が追加されました!

 

その後に、「パーマリンク設定」を更新保存します。(コレをしないとカスタム投稿が正常に表示されない場合があるため) なにもせず、そのままページ下の「変更を保存」を押します。

 

 

さっそく新規投稿っ!投稿の仕方は通常と同じで「公開」を押してページを確認したら… 投稿ページは良いのですが、アーカイブページのタイトルが「Archives」になっているので変更しようと思ったのですが、やり方がわからん!

ココからはちょっとうろ覚えなので設定方法が合ってるかは不明。でも表示は変えることができました!

まず、固定ページに「BOOK」が設定されてないので何処から開くねん!となり、固定ページへの表示設定から始めました。

・「外観」→「ヘッダー」→「メニュー」→「ヘッダーメニュー」→「+項目を追加」で「BOOK」を追加→「公開済み」

・「固定ページ」→「新規追加」で通常通りに設定。

ココで設定したタイトルが「Archives」部分に反映?されたのか、とにかく任務は遂行されたわけです。ですが、この設定にたどり着く前にやっていたコトがあって、そのおかげで達成できた感じです。

合間にやっていたのは『 タクソノミー(Taxonomy)』の作成です。

「タクソノミー」=「分類」記事を分類するときに使うもので、カテゴリやタグの指す。オリジナルの分類(カスタムタクソノミー)を作ることも可能。

なんでココに行きついたかは忘れてしまった…カテゴリ作ってアーカイブページなくそうとしたんやったかな?迷走してましたが、とりあえず設定を開始しました。

作成方法は投稿タイプとほぼ変わらず、

・「CPT UI」→「タクソノミーの追加と編集」→ 必要項目の設定をします。

  

①~③はカスタム投稿と同様に、タクソノミーの表記名を入力。

④「利用する投稿タイプ」=どの投稿タイプに紐づけするか選択。 ChimAの場合→「BOOK」

⑤「階層」=『True』を選択。

(True:投稿カテゴリのように階層構造を持つ / False:投稿タグのように階層構造をもたない)

 

「タクソノミーの追加」をすると、「ヨンダホンタチ」の項目が追加されました!

・その後は「パーマリンク設定」の更新保存を忘れずにっ!

 

 

 

・この項目の中にカテゴリーを作成します。ココで作成したカテゴリーは「BOOK」での投稿のみ使えるものです。

 

 

 

次に『固定ページ』でカスタム投稿のアーカイブがどのように表示されるかの設定をします。

・ビジュアルエディタの任意の場所 (テキスト)にショートコードを入力します。

[ ショートコード ] (Cocoonで利用できるショートコード)

new_list post_style=”book” taxonomy=”books” type=”large_thumb”

①「new_list」=新着一覧 (共通)

②「post_style=”book”」=登録した投稿タイプ「BOOK」のスラッグ

③「taxonomy=”books”」=登録したタクソノミーのスラッグ

④「type=”large_thumb”」=表示スタイル

※表示スタイルは他にもイロイロあるのでコチラを参考に!『 Cocoon 』

 

カテゴリ作成したけど、表示されてないやんっ!と思ったら、カテゴリ名が表示されるかはテーマによるそうで、「Cocoon」では表示されないみたいです。なので、自作のアイキャッチでカバーしました。

 

だがしかし、サイドバーの表示が欲しい… ってな訳で、またGoogle先生に伺いました。

ココで登場するのが新たなプラグイン『 List Custom Taxonomy Widget 』です。

・プラグインをインストール

・「外観」→「ウィジェット」をサイドバーに追加します。

 

・「Select Taxonomy」=どのタクソノミーを表示するか

・「Show Post Counts」=カテゴリ名の後に投稿数を表示するか

・「Show Hierarchy」=階層表示するか

・「Show Empty Terms」=空(投稿数0)のカテゴリを表示するか

・「Order By」=表示順

・「Exclude」=除外するカテゴリ

・「Only Show Children of」=特定のカテゴリの子カテゴリのみ表示

・「Display as Dropdown」=ドロップダウン表示するか

 

これで設置完了!だがだがしか~しっ!

“list-style-type: disc” の表示と “aタグ” の初期装備(青字₊下線)でめちゃダサい…

コレはもうCSSで直すほかありませんでしたので、

・「外観」→「テーマエディター」→「スタイルシート(style.css)」で修正しました。

修正点 > リストスタイルの変更・aタグのデコレーションを外してカラーチェンジ・aタグホバー時のカラーチェンジ

というコトで、このカタチに落ち着きました。

 

もしかしなくても遠回りなやり方だったのかもですが、何やらイロイロ学ぶコトもあったし良しとします!何年後かにコレ見て笑う自分に期待して、今日は終わりますっ!