[WordPress.com] ショートコード「display-posts」を使って、ある記事の中に別の記事の一部を挿入する

ショートコード「display-posts」のパラメータ「include_content」が使用できなくなったため、この記事の内容は無効です。

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

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

fgsdfgsfdg

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

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

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

image

一部分だけ表示する方法は、とりあえず、引用される記事すべてを「display: none;」にしておき、<div class=”quotearea”></div>で囲ってある部分だけ、「display: block;」に戻す、というやり方です。

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

  • 「ある記事中に別の記事の内容を挿入するための CSS」の更新履歴
    最終更新日:2013年4月19日、改訂内容:クラス「visible」を追加することで、第三者からも引用先がわかるようにした。
    /* ある記事中に別の記事の内容を挿入する */
    .logged-in .contentquote,.contentquote.visible {
    	background-color: #e9eff3;
    	padding: 10px 4%;
    	margin: 0 -4%;
    	border-radius: 4px;
    }
    
    .contentquote ul.display-posts-listing {
    	margin: 0;
    }
    
    .contentquote > ul > li > .content > *,.contentquote > ul > li > a.title {
    	display: none;
    }
    
    .contentquote ul.display-posts-listing li .quotearea {
    	display: block!important;
    }
    
    .logged-in .contentquote ul.display-posts-listing li a.title,.contentquote.visible ul.display-posts-listing li a.title {
    	display: block;
    	background-color: #aaa;
    	padding: 5px;
    	color: white;
    	border-radius: 3px;
    	margin-bottom: 1em;
    }
    作成日:2013年4月15日
    /* ある記事中に別の記事の内容を挿入する */
    .logged-in .contentquote {
        background-color: #e9eff3;
        padding: 10px 4%;
        margin: 0 -4%;
        border-radius: 4px;
    }
     
    .contentquote ul.display-posts-listing {
        margin: 0;
    }
     
    .contentquote > ul > li > .content > *,.contentquote > ul > li > a.title {
        display: none;
    }
     
    .contentquote ul.display-posts-listing li .quotearea {
        display: block!important;
    }
     
    .logged-in .contentquote ul.display-posts-listing li a.title {
        display: block;
        background-color: #aaa;
        padding: 5px;
        color: white;
        border-radius: 3px;
        margin-bottom: 1em;
    }

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

fgsdfgsfdg

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

adggadsgad

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

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

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

fgsgsfg

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

agfsfgsfd

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

sfgsfgsf

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

投稿者: comemo

mac & iPad で情報をインテグレートする

 

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

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