ワードプレスでサイトをつくる時に必要なこと

どうやってサイトを作っていけば良いのか、つまづきそうな所を集めた覚書です。 とりあえず自分が振り返った時に、このサイトを見れば大丈夫という感じにしていきます。

【ワードプレス】Display Posts Shortcodeで記事一覧ページをつくる方法

      2015/10/10

アイキャッチ画像をタイル状に並べた記事一覧ページを簡単に作る方法です。

①まずはコチラから『Display Posts Shortcode』をダウンロードし、ワードプレスのプラグイン新規追加でインストール。
もしくは、プラグインページから『Display Posts Shortcode』を検索してインストールしてもOK。

②『Display Posts Shortcode』プラグインを有効化。

③次にプラグイン『Custom css-js-php』をインストール・有効化して『Add New CSS』を選択。
続いて以下のコードをコピー&ペースト。


/** サムネイル画像をタイル状に並べる(「display-posts」ショートコード対応版)**/ .boxline ul.display-posts-listing { padding-left: 0!important; text-align: left; margin: 0 0 15px; } .boxline ul.display-posts-listing li { width: 92px; display: inline-block; vertical-align: top; white-space: normal; word-wrap: normal; font-size: 13px; line-height: 1.2; margin: 0; padding: 6px; } #ie7 .boxline ul.display-posts-listing li { display: inline; position: relative; width: 90px; } .boxline ul.display-posts-listing li img { display: block!important; border: 1px solid #d0a600!important; height: 70px!important; width: 90px!important; margin: 4px!important; padding: 2px!important; } /* mini 版 */ .boxline.mini ul.display-posts-listing li { width: 72px; } #ie7 .boxline.mini ul.display-posts-listing li { width: 70px; } .boxline.mini ul.display-posts-listing li img { height: 50px!important; width: 70px!important; } /* ------- */ /** ------------------- **/

Display Posts Shortcode
詳しくは、上の画像を参考にしてください。

※Apply Usingのところは、『Shortcode』ではなく『wp_head』を選択すること。

④任意の記事や固定ページのテキスト部分に以下のコードを記述。


<div class="boxline">[display-posts offset="1" image_size="thumbnail" posts_per_page="5"]</div>

※『posts_per_page=”5″』は表示するページ数を決めるコードになりますので、もっと沢山の記事を一覧表示したい場合はこの数をお好きな数に変更してください。

また、カテゴリーごとに固定ページや記事一覧を作りたい場合は、上のコードに『category=””』を加えて


<div class="boxline">[display-posts offset="1" image_size="thumbnail" category="任意のカテゴリー名" posts_per_page="5"]</div>

とするとOKです。

これで記事一覧ページが完成!!

ただ、アイキャッチ画像を設定していないと、せっかくタイル状に並べても見栄えがよくありません。

アイキャッチ画像の設定の仕方は、【ワードプレス】アイキャッチ画像を設定するプラグイン『Auto Post Thumbnail』の設定方法をご覧ください。

参考サイト:comemo https://comemo508.wordpress.com/

 - プラグイン, ワードプレス , , , , , , , ,

スポンサーリンク

スポンサーリンク

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

no image
【ワードプレス】固定ページの公開日・最終更新日の表示を消す方法(STINGER5の場合)

固定ページの公開日や最終更新日を表示する必要のない時は、その表示を消してしまいま …

no image
【ワードプレス】アイキャッチ画像を設定するプラグイン『Auto Post Thumbnail』の設定方法

普通は各記事ごとにアイキャッチ画像(サムネイル画像)を設定しないといけませんが、 …

no image
【ワードプレス】投稿した記事やカテゴリが表示されない時はどうすればいい?

せっかく記事を投稿したのに、いざそのページの出来を確かめようと思ったら404ペー …

no image
【ワードプレス】外観(STINGER5の場合)

テーマ STINGER5を使用 カスタマイズ ヘッダー画像⇒現在のヘッダーを『画 …

Multi Plugin Installer
【ワードプレス】複数のプラグインをまとめてインストール・有効化する方法

この方法を知ると、今まで1つずつプラグインをインストール・有効化していたのがバカ …

【ワードプレス】一度に20記事以上を一括編集する方法

大量の記事を『下書き』から『公開済み』にする時に一括編集を使うと思いますが、一度 …

no image
【ワードプレス】ファビコンを変更する

①favicon.ccで自分好みのファビコンを作成・ダウンロード ※海外サイトだ …

no image
【ワードプレス】文字に蛍光ペンを引いたようなハイライトをつける方法

文字を強調させる時に、太字だけでは物足りない時はハイライトをつけましょう。 方法 …

Twitterのタイムラインをブログのサイドバーに表示する方法

Twitter(ツイッター)のお気に入りアカウントのタイムラインを、自分のブログ …

no image
GoogleやBingの検索エンジンに自分のブログ・サイトをインデックス登録追加するには?

以下のサイトにアクセスして、インデックス登録するだけ。 Google: http …