Content Blocks (Custom Post Widget)の便利な使い方

Custom Post Widget
この記事は約12分で読めます。
現在このサイトではテーマを「Cocoon」に変更し有難く使わせて頂いています。 Cocoonでは、このプラグインは不要かもです。便利なテンプレ設定等々が可能なので。 プラグインとしては便利なものなのでこの記事自体は残しますが、 Cocoonユーザーの皆さんはテーマに付属の機能の使用をお勧めします。 2020/11/11追記 39maより

Custom Post Widget の便利な使い方

今日は、新たに見つけたプラグイン、Custom Post Widgetについて記事を書きます。

2020/11/11追記*現在の名称は「Content Blocks (Custom Post Widget)」となっています。13:22:44

このプラグインを使用すると、
WordPressのデフォルトで装備されている、テキストウィジェットを使う事が可能です。

サイドバーのウィジェットショートコードを使用してコンテンツブロックを編集し、
表示することができます

・・・なんて、さらっと説明しましたが、要は、カスタム投稿の為の専用プラグインです。


でも、これだけだと初心者やこれからwordpressを始める方には、
一体どいう事??とちょっと分かりにくいと思います。

先ずは、このプラグインの名称「Custom Post Widget」=「カスタムポストウィジェット」に
注目して頂くと分かりやすいと思いますので、本題に入る前に少しお付き合い下さい。

「カスタムポストウィジェット」のカスタムポストとは?

カスタムポストとは、「カスタム投稿」の事です。

「あ、なんだそうか。」と思われた方には説明は不要ですし、
そもそも「そんな事知ってる」とページを閉じてしまわれる事でしょう。
でも、初心者には『「カスタム投稿」って何処なの?どこで書けるの?』と、疑問に思う筈です。

私も今回新たにこのサイトを始めた時、正にそう思いました。
数年前、wordpressを始めた頃にはこのカスタム投稿についての参考になる記事も
殆ど無かったのですし、、、

実際、WEBで色々とみてみた👀のですが、このカスタム投稿について、
初心者や素人でも、解りやすい感じの解説ページが殆どなく、
wordpress日本語Codexの投稿タイプの頁でもちょっと敷居の高い感じです。

投稿タイプ – WordPress Codex 日本語版

他、検索上位Hitページは結構ハードルの高い専門用語の羅列で理解しにくかったので、
カスタム投稿について自分なりに記事にしてみよう。と思ったのでした。
それが昨日のこちらの記事です。

WordPress 投稿タイプ カスタム投稿 とは?
「カスタム投稿」は、自分で好きな投稿のタイプを決める事が可能な機能です。 もっと砕けていうと、「固定ページ」=post と 「投稿」=page のメイン投稿以外に、自分で好きな名前で作る「投稿」の事なんです。 WordPressの基本の投稿タイプは5つあります。 投稿 (post) 固定ページ (page) 添付ファイル (attachment) リビジョン (revision) ナビゲーションメニュー (nav_menu) の5つです。 添付ファイルや、リビジョン、ナビゲーションメニューは、 記事を書く事についてのおまけな位置づけな感じがしますよね。 でも、WordPressでは、この5つがデフォルトの「投稿」と位置づけられているそうです。

上記の記事を読んで頂ければ解ると思うのですが、
ざっくり言うと、自分でカスタム投稿タイプを利用するには、

functions.php に色々コードを書き
register_post_typeって、
関数で設定しなくちゃ駄目なのです。

 

えっ、そんなの面倒じゃん。wordpressには標準仕様ではないの?

 

そうよね、面倒よねぇ、標準仕様じゃないのよ。だからカ・ス・タ・ムって事なのかもよ(笑)

 

じゃぁ、どーするの?

 

Custom Post Widgetを使えば簡単に投稿できるのよ

 

成程、プラグインで解決しちゃうんだね~

 

 

そうよ。自分で設定するのは「あり」だと思うけど、その時間があるならカスタム投稿で出来る事が色々あるのよ。

ウィジェットを使って好きなところに表示する事も出来るしね~

 

 

へぇ~じゃあ、遊んでないで早くしてよ。

了解。

すいません、以前からずっと、このライン風会話を記事で使ってみたかったんですよ😓

ぶっちゃけて言うと・・・カスタム投稿タイプの事を理解出来ていなくっても、
このプラグインを使用すると使う事には問題なくなると思いますので、使い方の説明に進みます😐

Custom Post Widget の使い方

Custom Post Widget

Custom Post Widget

Custom Post Widget をダウンロードして有効化する

https://ja.wordpress.org/plugins/custom-post-widget/
上記 ページでバージョン 2.8.22.8.5(2016/01/29更新)をダウンロードし
ZIPファイルをWordpressに上げて有効化します。(WordPress4.4.1で動作確認済)

ダッシュボード プラグイン 新規追加 プラグインのアップロード
参照でファイルを選択し ZIPファイルをアップロード。
この流れで有効化するか、
ダッシュボード プラグイン 新規追加
プラグインの検索(画面右上)で「Custom Post Widget」 と入力、
検索で上がってきたものをインストールし有効化します。

設定~という設定は無し。デス😏 有効化するだけです。

有効化後の管理画面と投稿画面

有効化をすると、ダッシュボードに投稿・固定ページと同じように投稿項目が増えます。
Content Blockというメニュー項目です。

custom-post-widget_1 

Content Blockをクリックすると、投稿・固定ページの管理画面と同じ画面が出現します。

custom-post-widget_2 
custom-post-widget_3

この画面の上部にある、Add Content Blockというボタンをクリックするか、
メニュー項目の「Add Content Block」をクリックすると、
カスタム投稿の新規投稿(編集)画面にいきます。

custom-post-widget_4

この画面で普段投稿記事を書いているように、文書ないし、表示させたい事を書きます。

ビジュアルエディタ、テキストエディタの何れも使えます。

カスタム投稿したものを、ウィジェットで表示させる 使い方

主な使用方法は、カスタム投稿したものを、ウィジェットで表示させる。という事です。

他の便利な使い方は順追って記載していきますので、先ずは基本の使い方から。

カスタム投稿したものを、ウィジェットで表示させる

ウィジェットの管理画面にいきます。

先程有効化した事で、
Content Blocks(コンテンツブロック)という項目が増えている筈です。

custom-post-widget_5

これを表示させたい場所に移動します。

custom-post-widget_6

Content Blocksタブをクリックしてみて下さい。
Custom Post Widgetから投稿した記事一覧をここで参照する事が出来るのです。

custom-post-widget_7

今、インストールしたてで、カスタム投稿を行っていない場合は
何も出てきていないので、ちょと分かりにくいかも知れませんので、例を挙げてご説明します。

例1.トップページを変更してみた。

先日トップページ専用ウィジェットをつくったので、

WordPress-Simplicity トップページ専用ウィジェットをつくる
WordPress-Simplicity トップページ専用ウィジェットをつくる 1 Simplicityの親テーマのbefore-main.phpを子テーマにコピー 2 Simplicity 子テーマでウィジットエリアの追加 2.1 Simplicity 子テーマ functions.php を編集 2.2 Simplicity 子テーマ style.css を編集 2.3 Simplicity 子テーマ before-main.php を編集 3 ウィジェットが追加されているかみてみた

この新たなウィジェットスペースでどんな事が出来るか?という、
レクチャーサンプルが欲しかったのと、
カスタム投稿についてのお話しがしたかった事もあるので、
トップページをちょっと変わったものにする前のテスト
現在(2015/10/25)トップページを以下のように表示させています。

custom-post-widget_8

この記事を書く為に、期間限定でテスト表示させているものです。

この「こんにちは。ようこそ~」の部分から、「拡散協力」の部分のテキストが
カスタム投稿(Add Content Block)で書いたものを、ウィジェットで表示させているのです。

では、一連の流れを例として説明させて頂きます。

カスタム投稿でトップページに挨拶文を編集する
custom-post-widget_9
先ずは、Content BlockのAdd Content Blockをクリックして、
トップページ頭に表示させたい内容を編集しました。

(画像がでかいので、サムネイルにしています。
クリックして状態を確認してみて下さい。)

通常、ブログ記事を書くように編集できますので、
画像を貼り付けたりも可能です。

書き終えたら、更新ボタンをクリックして普通に記事を保存します。

ウィジェット管理画面で設定

更新ボタンをクリックすると、
同画面の上部に、”Content Block updated. Manage Widgets“と表示されます。

custom-post-widget_10

このManage Widgetsをクリックすると、
ウィジェット管理画面に直接ジャンプしますので、前項で説明した
Content Blocks(コンテンツブロック)という項目をマウスで掴み、表示スペースへ移動します。

custom-post-widget_11 
画像はトップページメインスペースに移動し、
既に保存を終えた状態です。
【こんなスペース私には無いよ。と思われた方はこの記事をどうぞ】
(画像がでかいので、サムネイルにしています。
クリックして状態を確認してみて下さい。)

ここも通常のウィジェット作業と同じように設定が終ったら
保存ボタンをクリックします。

これで、トップページに挨拶文を掲載する事が出来ました。
画像内の、Edit Content Blockですが、リンク先は、記事の編集画面です。
ウィジェット内から直接カスタム投稿の記事編集画面に行けるのは便利ですよね。

それから、注意点として、
投稿画面でアイキャッチ画像を設定するようになってますが、
(”投稿”なのだから、当り前っちゃーあたりまえ・・・)
私の場合、小さい画像を編集画面に入れ込んで表示しています。コレです。

アイキャッチ画像を何も設定しないと、
この小さい画像を勝手に、「アイキャッチ画像」として、wordpressが読み込みますので、
スペーサーpngと言う、ちっこいpng画像を「アイキャッチ画像」に設定しているのです。

custom-post-widget_12このちっこいPNG画像が設定した「アイキャッチ画像」
解りやすいようにペーストしている為、反転していますが、透過画像なので視覚的には見えてません

その際、ウィジェット内の項目、にチェックを入れました。

これをしないと、、、
トップページに二個の画像が表示されて、難儀な展開になりましたので。。。念の為。
大きなお世話かも知れませんが、必要な方はどうぞ spacer_png(3pxのちっこい透過画像です)

カスタム投稿したものを、投稿ページで表示させる 使い方

例2.投稿ページ内に毎回同じ文言を挿入する。

ウィジェットだけでなく、投稿記事内に、カスタム投稿を入れ子にする事も可能です。
今回はわいひら氏の呼び掛けを
非力ながら暫く当サイトでも拡散希望として記事に暫く表示しようと思っているので、
この記事にいれてみます。

先ずは、カスタム記事を書きます。書いたら、保存します。保存は「公開」ボタンになります

custom-post-widget_13

公開ボタンのクリックで保存したら、次は、通常の投稿画面で記事を書きます。

この例の場合は、この記事に挿入するので、この記事の投稿画面に戻っただけです。

custom-post-widget_14

ビジュアルエディターにも、テキストエディターにも
Add Content Block」というボタンがありますのでクリックします。

すると、以下のように Insert Content Blocks 画面が、ポップアップしてきます。

custom-post-widget_15

セレクトタブで先程、公開(保存)した、「拡散希望」をチョイス。

custom-post-widget_16

  Insert Content Blocksボタンをクリックする事で、カスタム投稿を記事中に入れる事が出来ます。

私は記事終わりに、掲載したいので、
記事の最後の改行タグの下に、カスタム投稿記事を入れました。
編集途中の画面を観ると、ちゃんとカスタム投稿のショートコードが挿入されています。

custom-post-widget_17[content_block id=2059 slug=%e6%8b%a1%e6%95%a3%e5%b8%8c%e6%9c%9b]と挿入された

これをブラウザーで確認してみると、、、

custom-post-widget_18

このように、ちゃんとカスタム投稿記事が反映されます。
この記事に入れていますので、文末まで行かれると目視確認頂けます。

カスタム投稿したものを、様々な方法で表示させる 使い方

例3.特定のページにだけ、画像をいれたりアナウンスをいれたりする。

2.の応用編で、任意のページにだけ、何かを表示したい時や、
プラグインを使用せずに、画像ギャラリーみたいな表示をする時にでも活用できると思います。
色々とアイディアがあり、実際に実行してみた事もあるのでご紹介したいのですが、
また何れ。

まとめ

かなり長くなっていますが😞、まだ色々と思いついた事や試した事があるのです。
でも、取り上げていたらキリがないので、この辺りで切り上げます。

つまり、このプラグインとウィジェットを併用する事で出来る事や、
投稿画面で使用する事で、様々なカスタマイズも可能になるんです。

本当は、、、

WordPress–記事を投稿する前に変更したい事&追加プラグイン①
WordPress 記事を投稿する前に変更したい事&追加プラグイン①AddQuicktag PS Disable Auto Formatting TinyMCE Advanced Simple Tags WordPress Yoast SEO (SEO by Yoast) Table of Contents Plus HTML entities button PS Auto Sitemap Category Order Custom Field Template Crayon Syntax Highlighter

以前、↑で、メモ書きしていますが、Custom Field Template と言うプラグインを
早い段階でインストール済なんです。
ですが、まだ映画の記事に着手していないので、あの日の宿題✏にしたまま。

そうこうしているうちに、
Advanced Custom Fields という良さげなものまで見付けてしまい・・・😩

まぁ、今回はちょっとだけ先を急ぎたかった感があり、お手軽なものに手を付けましたが、
このプラグインのお陰で、
カスタム投稿について、ある程度の知識を身に着ける事が出来たように思います。

カスタム投稿についての予備知識取得には確実に貢献してくれるプラグインだと思います😃

これから始める方、一度使ってみては如何でしょうか。

ご閲覧ありがとうございます。お粗末でした。

 

 

 

コメント

  1. ショーコ より:

    こんにちわ!

    ネットや本で散々探していた
    トップページのカスタマイズ方法 
    をやっと知ることができました!

    カスタム投稿でこんなアレンジが
    できるとは…

    めちゃ感動しました、ありがとう
    ございました。

    これからも学ばせてください~

    • 39ma(さくま)39ma より:

      ショーコさん

      はじめまして、こんにちは。
      ご訪問と記事のご閲覧をありがとうございます。

      そして、コメントの投稿まで頂けるなんて、とっても励みになります。
      大変嬉しく拝見しました。

      トップページにInformationやご挨拶のコーナーを設けたりすると、
      BLOGでもちょっぴり洒落た感じになりますよね~。

      お役に立てば幸いです^^*

      色々と日々勉強中なので、
      下手な記事が多いサイトですが、またお越し下さい。

  2. […] https://mitemita.com/custom-post-widget/mitemita.com スポンサーリンク (adsbygoogle=window.adsbygoogle||[]).push({}); (adsbygoogle=window.adsbygoogle||[]).push({}); […]

タイトルとURLをコピーしました