Custom Post Widget の便利な使い方
今日は、新たに見つけたプラグイン、Custom Post Widgetについて記事を書きます。
このプラグインを使用すると、
WordPressのデフォルトで装備されている、テキストウィジェットを使う事が可能です。
サイドバーのウィジェットやショートコードを使用してコンテンツブロックを編集し、
表示することができます。
・・・なんて、さらっと説明しましたが、要は、カスタム投稿の為の専用プラグインです。
でも、これだけだと初心者やこれからwordpressを始める方には、
一体どいう事??とちょっと分かりにくいと思います。
先ずは、このプラグインの名称「Custom Post Widget」=「カスタムポストウィジェット」に
注目して頂くと分かりやすいと思いますので、本題に入る前に少しお付き合い下さい。
「カスタムポストウィジェット」のカスタムポストとは?
カスタムポストとは、「カスタム投稿」の事です。
「あ、なんだそうか。」と思われた方には説明は不要ですし、
そもそも「そんな事知ってる」とページを閉じてしまわれる事でしょう。
でも、初心者には『「カスタム投稿」って何処なの?どこで書けるの?』と、疑問に思う筈です。
私も今回新たにこのサイトを始めた時、正にそう思いました。
数年前、wordpressを始めた頃にはこのカスタム投稿についての参考になる記事も
殆ど無かったのですし、、、
実際、WEBで色々とみてみた👀のですが、このカスタム投稿について、
初心者や素人でも、解りやすい感じの解説ページが殆どなく、
wordpress日本語Codexの投稿タイプの頁でもちょっと敷居の高い感じです。
他、検索上位Hitページは結構ハードルの高い専門用語の羅列で理解しにくかったので、
カスタム投稿について自分なりに記事にしてみよう。と思ったのでした。
それが昨日のこちらの記事です。

上記の記事を読んで頂ければ解ると思うのですが、
ざっくり言うと、自分でカスタム投稿タイプを利用するには、
functions.php に色々コードを書き
register_post_typeって、
関数で設定しなくちゃ駄目なのです。
えっ、そんなの面倒じゃん。wordpressには標準仕様ではないの?
そうよね、面倒よねぇ、標準仕様じゃないのよ。だからカ・ス・タ・ムって事なのかもよ(笑)
じゃぁ、どーするの?
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というメニュー項目です。
![]() |
Content Blockをクリックすると、投稿・固定ページの管理画面と同じ画面が出現します。
![]() |
![]() |
この画面の上部にある、Add Content Blockというボタンをクリックするか、
メニュー項目の「Add Content Block」をクリックすると、
カスタム投稿の新規投稿(編集)画面にいきます。
![]() |
この画面で普段投稿記事を書いているように、文書ないし、表示させたい事を書きます。
ビジュアルエディタ、テキストエディタの何れも使えます。
カスタム投稿したものを、ウィジェットで表示させる 使い方
主な使用方法は、カスタム投稿したものを、ウィジェットで表示させる。という事です。
他の便利な使い方は順追って記載していきますので、先ずは基本の使い方から。
カスタム投稿したものを、ウィジェットで表示させる
ウィジェットの管理画面にいきます。
先程有効化した事で、
Content Blocks(コンテンツブロック)という項目が増えている筈です。
![]() |
これを表示させたい場所に移動します。
![]() |
Content Blocksタブをクリックしてみて下さい。
Custom Post Widgetから投稿した記事一覧をここで参照する事が出来るのです。
![]() |
今、インストールしたてで、カスタム投稿を行っていない場合は
何も出てきていないので、ちょと分かりにくいかも知れませんので、例を挙げてご説明します。
例1.トップページを変更してみた。
先日トップページ専用ウィジェットをつくったので、

この新たなウィジェットスペースでどんな事が出来るか?という、
レクチャーサンプルが欲しかったのと、
カスタム投稿についてのお話しがしたかった事もあるので、
トップページをちょっと変わったものにする前のテストで
現在(2015/10/25)トップページを以下のように表示させています。
![]() |
この記事を書く為に、期間限定でテスト表示させているものです。
この「こんにちは。ようこそ~」の部分から、「拡散協力」の部分のテキストが
カスタム投稿(Add Content Block)で書いたものを、ウィジェットで表示させているのです。
では、一連の流れを例として説明させて頂きます。
カスタム投稿でトップページに挨拶文を編集する
トップページ頭に表示させたい内容を編集しました。
(画像がでかいので、サムネイルにしています。
クリックして状態を確認してみて下さい。)
通常、ブログ記事を書くように編集できますので、
画像を貼り付けたりも可能です。
書き終えたら、更新ボタンをクリックして普通に記事を保存します。
ウィジェット管理画面で設定
更新ボタンをクリックすると、
同画面の上部に、”Content Block updated. Manage Widgets“と表示されます。
![]() |
このManage Widgetsをクリックすると、
ウィジェット管理画面に直接ジャンプしますので、前項で説明した、
Content Blocks(コンテンツブロック)という項目をマウスで掴み、表示スペースへ移動します。
既に保存を終えた状態です。
【こんなスペース私には無いよ。と思われた方はこの記事をどうぞ】
(画像がでかいので、サムネイルにしています。
クリックして状態を確認してみて下さい。)
ここも通常のウィジェット作業と同じように設定が終ったら
保存ボタンをクリックします。
これで、トップページに挨拶文を掲載する事が出来ました。
画像内の、Edit Content Blockですが、リンク先は、記事の編集画面です。
ウィジェット内から直接カスタム投稿の記事編集画面に行けるのは便利ですよね。
それから、注意点として、
投稿画面でアイキャッチ画像を設定するようになってますが、
(”投稿”なのだから、当り前っちゃーあたりまえ・・・)
私の場合、小さい画像を編集画面に入れ込んで表示しています。コレです。
アイキャッチ画像を何も設定しないと、
この小さい画像を勝手に、「アイキャッチ画像」として、wordpressが読み込みますので、
スペーサーpngと言う、ちっこいpng画像を「アイキャッチ画像」に設定しているのです。
![]() 解りやすいようにペーストしている為、反転していますが、透過画像なので視覚的には見えてません |
その際、ウィジェット内の項目、にチェックを入れました。
これをしないと、、、
トップページに二個の画像が表示されて、難儀な展開になりましたので。。。念の為。
大きなお世話かも知れませんが、必要な方はどうぞ spacer_png(3pxのちっこい透過画像です)
カスタム投稿したものを、投稿ページで表示させる 使い方
例2.投稿ページ内に毎回同じ文言を挿入する。
ウィジェットだけでなく、投稿記事内に、カスタム投稿を入れ子にする事も可能です。
今回はわいひら氏の呼び掛けを
非力ながら暫く当サイトでも拡散希望として記事に暫く表示しようと思っているので、
この記事にいれてみます。
先ずは、カスタム記事を書きます。書いたら、保存します。保存は「公開」ボタンになります↓
![]() |
公開ボタンのクリックで保存したら、次は、通常の投稿画面で記事を書きます。
この例の場合は、この記事に挿入するので、この記事の投稿画面に戻っただけです。
![]() |
ビジュアルエディターにも、テキストエディターにも
「Add Content Block」というボタンがありますのでクリックします。
すると、以下のように Insert Content Blocks 画面が、ポップアップしてきます。
![]() |
セレクトタブで先程、公開(保存)した、「拡散希望」をチョイス。
![]() |
Insert Content Blocksボタンをクリックする事で、カスタム投稿を記事中に入れる事が出来ます。
私は記事終わりに、掲載したいので、
記事の最後の改行タグの下に、カスタム投稿記事を入れました。
編集途中の画面を観ると、ちゃんとカスタム投稿のショートコードが挿入されています。
![]() |
これをブラウザーで確認してみると、、、
![]() |
このように、ちゃんとカスタム投稿記事が反映されます。
この記事に入れていますので、文末まで行かれると目視確認頂けます。
カスタム投稿したものを、様々な方法で表示させる 使い方
例3.特定のページにだけ、画像をいれたりアナウンスをいれたりする。
2.の応用編で、任意のページにだけ、何かを表示したい時や、
プラグインを使用せずに、画像ギャラリーみたいな表示をする時にでも活用できると思います。
色々とアイディアがあり、実際に実行してみた事もあるのでご紹介したいのですが、
また何れ。
まとめ
かなり長くなっていますが😞、まだ色々と思いついた事や試した事があるのです。
でも、取り上げていたらキリがないので、この辺りで切り上げます。
つまり、このプラグインとウィジェットを併用する事で出来る事や、
投稿画面で使用する事で、様々なカスタマイズも可能になるんです。
本当は、、、

以前、↑で、メモ書きしていますが、Custom Field Template と言うプラグインを
早い段階でインストール済なんです。
ですが、まだ映画の記事に着手していないので、あの日の宿題✏にしたまま。
そうこうしているうちに、
Advanced Custom Fields という良さげなものまで見付けてしまい・・・😩
まぁ、今回はちょっとだけ先を急ぎたかった感があり、お手軽なものに手を付けましたが、
このプラグインのお陰で、
カスタム投稿について、ある程度の知識を身に着ける事が出来たように思います。
カスタム投稿についての予備知識取得には確実に貢献してくれるプラグインだと思います😃
これから始める方、一度使ってみては如何でしょうか。
ご閲覧ありがとうございます。お粗末でした。
コメント
こんにちわ!
ネットや本で散々探していた
トップページのカスタマイズ方法
をやっと知ることができました!
カスタム投稿でこんなアレンジが
できるとは…
めちゃ感動しました、ありがとう
ございました。
これからも学ばせてください~
ショーコさん
はじめまして、こんにちは。
ご訪問と記事のご閲覧をありがとうございます。
そして、コメントの投稿まで頂けるなんて、とっても励みになります。
大変嬉しく拝見しました。
トップページにInformationやご挨拶のコーナーを設けたりすると、
BLOGでもちょっぴり洒落た感じになりますよね~。
お役に立てば幸いです^^*
色々と日々勉強中なので、
下手な記事が多いサイトですが、またお越し下さい。
[…] https://mitemita.com/custom-post-widget/mitemita.com スポンサーリンク (adsbygoogle=window.adsbygoogle||[]).push({}); (adsbygoogle=window.adsbygoogle||[]).push({}); […]
[…] https://mitemita.com/custom-post-widget/#3 […]