WordPressの記事(投稿)を自分のサイトに表示するjQueryプラグイン「wp-posts.js」の紹介

WordPressブログの新着記事を自分のサイトに表示するjQueryプラグインの紹介です。

  1. デモ
  2. 設置方法
  3. オプション

1.デモ

準備中です。

2.設置方法

準備

事前に「新着記事一覧を表示するページ(トップページなど)」と「記事全体を表示するページ(記事詳細ページ)」を作成し、ダミーテキストを使いタイトルや記事本文などの表示を調整しておきます。

記事全体を表示するページは、必ず「post.html」というファイル名にしておきます。(新着記事一覧を表示するページはどんなファイル名でも構いません。)

手順1 プログラムのダウンロード

以下のリンクより、プログラムをダウンロードしてください。
「wp-posts.js」のダウンロード

手順2 「wp-posts.js」の配置

「js」フォルダのみをサイトフォルダ内に配置してください。

手順3 スクリプト読み込みコードの記述

(1) jQueryを読み込みます。

(2) 「wp-post.js」を読み込みます。

(3) 新着記事表示用のJSを記述します。

<script>
$(function(){
 $('.wp-post').wpPosts({
  url: 'https://blog.aroundit.net/', // ここにWordpressブログのアドレス
  number: 3 // 一覧表示する記事の数
 });
});
</script>

手順4 一覧ページ各タグに表示してほしい内容を設定

以下のコードを参考に「data-title」や「data-date」属性をタグに追加してください。

<li class="wp-post">
 <time data-date></time><br>
 <a data-title data-link></a>
</li>

手順5 詳細ページ各タグに表示してほしい内容を設定

必ず<article>タグで記事全体を囲ってください。
そして、「手順4」と同様に各タグに「data-title」などの属性を追加します。

<article>
 <h1 data-title></h1>
 <div data-date></div>
 <div data-content></div>
</div>

3.オプション

表示可能なコンテンツは以下の通りです。

表示される内容属性記述例
タイトル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>

コメントを残す

メールアドレスが公開されることはありません。