WordPressブログの新着記事を自分のサイトに表示するjQueryプラグインの紹介です。
- デモ
- 設置方法
- オプション
１．デモ
準備中です。
２．設置方法
準備
事前に「新着記事一覧を表示するページ（トップページなど）」と「記事全体を表示するページ（記事詳細ページ）」を作成し、ダミーテキストを使いタイトルや記事本文などの表示を調整しておきます。
記事全体を表示するページは、必ず「post.html」というファイル名にしておきます。（新着記事一覧を表示するページはどんなファイル名でも構いません。）
手順１ プログラムのダウンロード
以下のリンクより、プログラムをダウンロードしてください。
「wp-posts.js」のダウンロード
手順２ 「wp-posts.js」の配置
「js」フォルダのみをサイトフォルダ内に配置してください。
手順３ スクリプト読み込みコードの記述
(1) jQueryを読み込みます。
(2) 「wp-post.js」を読み込みます。
(3) 新着記事表示用のJSを記述します。
<script>
$(function(){
$('.wp-post').wpPosts({
url: 'https://blog.aroundit.net/', // ここにWordpressブログのアドレス
number: 3 // 一覧表示する記事の数
});
});
</script>手順４ 一覧ページ各タグに表示してほしい内容を設定
以下のコードを参考に「data-title」や「data-date」属性をタグに追加してください。
<li class="wp-post">
<time data-date></time><br>
<a data-title data-link></a>
</li>手順５ 詳細ページ各タグに表示してほしい内容を設定
必ず<article>タグで記事全体を囲ってください。
そして、「手順４」と同様に各タグに「data-title」などの属性を追加します。
<article>
<h1 data-title></h1>
<div data-date></div>
<div data-content></div>
</div>３．オプション
表示可能なコンテンツは以下の通りです。
| 表示される内容 | 属性 | 記述例 |
| タイトル | data-title | <h2 data-title></h2> |
| 本文 | data-content | <div data-content></div> |
| 投稿日時 | data-date | <time data-date></time> |
| リンク | data-link | <a data-link></a> |
| 抜粋（本文を短くした文章） | data-excerpt | <div data-excerpt></div> |
| アイキャッチ画像 | data-image | <img data-image></img> |
| カテゴリー名 | data-category | <div data-category></div> |