[WordPress.com] ショートコード「display-posts」を使って、ウィジェットの方に記事の一部もしくは全部を表示する

最終更新日:2015-12-24

!

2015-03-10現在、ショートコード「display-posts」のパラメータ「include_content」がウィジェットで利用できていることを確認済み。

2015-03-10 at 8.26

ただし、すべてのテーマで利用できるか等については未検証・未調査。

2013年6月12日現在、ショートコード「display-posts」のパラメータ「include_content」はウィジェットでは使用できないようですので、この記事の内容は無効です。

前回の記事「[WordPress.com] ショートコード「display-posts」を使って、ある記事の中に別の記事の一部を挿入する」では、「記事」↔「記事」間のデータのやりとりについて検討しました。

今回は、「記事」から「ウィジェット」へデータを移せるか、記事の一部もしくは全部をウィジェット、具体的にはテキストウィジェットを通じて、サイドバーやフッターへ表示させることができるかどうかについて検討してみました。

結論としては、「記事」↔「記事」間のデータのやりとりのときとほぼ同様の方法で、記事の内容をショートコード「display-posts」およびテキストウィジェットを通じて、サイドバーやフッターへ表示させることができることがわかりました。

このブログでは、フッターにある「まとめ記事一覧」をこの方法で表示させたので、ここでは、その覚書をしたいと思います。

ログインしている状態では、フッターにある「まとめ記事一覧」は以下のように表示されています。

sdgagasd

例えば、「まとめ記事一覧 – WordPress.com の使い方 -」のリンクをクリックすると、

dgasdfasdf

該当部分の固定ページが開くようにしました。このしくみは、前回検討した要領と同じです。

sdgadsfgdasfg
まとめ記事一覧 - WordPress.com の使い方 –

記事中の、ウィジェットへ引用したい部分を

で囲っておき、

image

一方、テキストウィジェットの方には、以下のような記述を追加しました。

<div class="contentquote">[display-posts id="49633" post_type="page" include_content="true"]</div>

CSS スタイルシートエディターの方に貼ってある CSS は、前回の記事のものと全く同じ、以下のものです。

  • [WordPress.com] ショートコード「display-posts」を使って、ある記事の中に別の記事の一部を挿入する
    ショートコード「display-posts」のパラメータ「include_content」が使用できなくなったため、この記事の内容は無効です。

    以前、記事「[WordPress.com] ショートコード「display-posts」を使って、ある特定の記事の内容を任意の場所に表示する」において、ある記事の中に別の記事をまるごと挿入する方法について検討しました。

    今回は、まるごとではなく、一部分だけを挿入する方法について検討してみました。

    fgsdfgsfdg

    別の記事の一部分が表示される側の記事の方は、以下のような記述とし(投稿記事から引用する場合には、「post_type=”page”」の部分はいりません。)、

    <div class="contentquote">
    
    </div>

    一部分が引用される側の、引用部分については、以下のような記述としました。

    image

    一部分だけ表示する方法は、とりあえず、引用される記事すべてを「display: none;」にしておき、

    で囲ってある部分だけ、「display: block;」に戻す、というやり方です。

    また、CSS スタイルシートエディターに追加した CSS は以下のとおりです。

    引用先の記事をログインしている状態で見ると、以下のような感じになります。

    fgsdfgsfdg

    ログアウトしている、一般の閲覧者からは、別の記事から引用しているかどうかは、見かけ上、わからないようにしました。

    adggadsgad

    ログイン・ログアウトでの表示の切り分けは、記事「記事中に自分だけが見れるメモ欄を挿入する」のときと同様に body 要素のクラス「logged-in」を使って行いました。

    WordPress.com に記事の一部を別の記事中に挿入する機能があることがわかるように上記の切り分けはしないように変更しました(2013年4月17日追記)。← なんとなく見苦しいのと、気軽に使えなくなるので、やっぱり切り分けることにしました(2013年4月18日追記)。← クラス「visible」というものを作って、第三者にも見れるようにするかどうか、切り分けられるようにしました(2013年4月19日追記)。

    なお、引用先から引用元、引用元から引用先の探し方ですが、まず、引用先から引用元の探し方は、ログインしている状態でリンクがつくので問題ありません。

    fgsgsfg

    引用元から引用先を探すのは、表示されている文字ではなくて、ショートコードの ID 番号等を使って検索すると、

    agfsfgsfd

    ちゃんと探し出せるようです。

    sfgsfgsf

    また、ひとつの記事から、複数の部分を別々の記事に引用をするときには、CSS のクラス名を増やすなどして対処すれば OK かと思います。

WordPress.com に記事の一部をテキストウィジェット中に挿入する機能があることがわかるようにログイン・ログアウトでの表示の切り分け(クラス「.logged-in」の利用)はしないように変更しました(2013年4月17日追記)。← なんとなく見苦しいのと、気軽に使えなくなるので、やっぱり切り分けることにしました(2013年4月18日追記)。← クラス「visible」というものを作って、第三者にも見れるようにするかどうか、切り分けられるようにしました(2013年4月19日追記)。

将来的にはどうなるかわかりませんが、今のところ、変更履歴・更新履歴を残す機能は、ウィジェットの方にはありませんので、データの保守・管理の観点等からは、記事の方で内容の修正等を行い、ショートコード「display-posts」を通じて出力・表示させた方がスマートではないかと思いました。

なお、将来的にレンタルサーバ等にインストールして使うタイプの WordPress への引越しを検討されている方においては、現時点においては、ショートコード「display-posts」を WordPress.org で使うことはできない(=プラグイン「JetPack by WordPress.com」で導入されていない)ようですので、本方法等の導入は慎重になられた方がよろしいかと思います。なお、レンタルサーバ等にインストールして使うタイプの WordPress でショートコード「display-posts」を使う場合には、プラグイン「Display Posts ShortCode」を使えばいいようです(記事「[レンタルサーバ等の WordPress] プラグイン「Display Posts Shortcode」をインストールすれば、WordPress.com のショートコード「Display-posts」を使えるようだ」参照)。

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。