syg-wp-posts-convert

Description

WordpressのREST API、または同梱のpage-newslist.phpが出力するjsonをhtmlに変換する。

Release

• 2021.11.26
  • TypeScriptで書き換え
  • メソッド名をキャメルケースに変更
  • コンストラクタで呼び出しタイプを指定するよう変更
  • REST API、付属の page-newslist.php どちらで取得しても項目名を統一した
• 2021.06.21
  • カテゴリーに対応（要 functions.php の書き換え）
• 2018.11.23
  • Wordpress WP REST API に対応。
  • 過去バージョンの page-newslist.php を使う場合は type: 'custom' を指定する必要がある。
  • ヘルパー convert_date() 内での日付分割方法を変更

Install

npm install --save @sygnas/wp-posts-convert

Wordpressの準備

REST API使用のパターン

REST APIにはカテゴリ情報が含まれないので、同梱の wordpress/api_add_category.php を読み込ませる必要がある。

① 同梱の wordpress/api_add_category.php を使用しているテーマのフォルダにコピーする。

② テーマの functions.php に下記を追加する。

require 'api_add_category.php';

REST APIを使わないで、固定ページを使うパターン

REST APIが許可されていない環境ではこちらの方法を使う。 基本的にはREST APIを使ったほうがラク。

① 同梱の wordpress/page-newslist.php をテーマのフォルダにコピーする。

② 固定ページを新規作成し、スラッグを newslist にする。

③ https://{ブログURL}/newslist を開いてjsonが表示されればOK。

基本的な実装

REST APIを使用した例。 urlは data-url 属性で指定しているが、スクリプトに直書きでも良い。 アイキャッチ画像が不要なら _embed& は削除しても良い。

HTML

<!-- テンプレート -->
<script type="text/x-template" class="js-wp-posts-template-1">
  <li>
      <a href="{{link}}">
          {{date}} - {{title}}
      </a>
  </li>
</script>

<!-- この<ul>の中に変換されたデータが入る -->
<!-- data-url属性でREST APIのurlを指定している -->
<ul class="js-wp-posts-1" data-url="https://####.com/news/wp-json/wp/v2/posts?_embed&per_page=3"></ul>

JavaScript

import WpPostsConvert from '@sygnas/wp-posts-convert';

// テンプレート
const template1 = document.querySelector('.js-wp-posts-template-1').textContent;
// REST API url
const url1 = document.querySelector('.js-wp-posts-1').dataset.url;
// typeでREST API方式を指定
const convert1 = new WpPostsConvert({
  type: WpPostsConvert.TYPE.REST,
  template: template1,
  target: '.js-wp-posts-1',
});
// urlを渡して実行
convert1.start(url1);

少し手間をかけた実装

REST APIではなく page-newslist.php からjsonを取得する例。 他にも日付書式を変換したり、カテゴリー、アイキャッチを表示したり。 ヘルパーサンプルとしてタイトルの数字を丸数字にしている。

HTML

<!-- リストアイテム用テンプレート -->
<script type="text/x-template" class="js-wp-posts-template-2">
  <li>
    <a href="{{link}}">
      <img src="{{eyecatch}}">
      <span>{{{convertDate("date","YY年MM月DD日")}}}</span> -
      {{#loop categories}}
      <span>{{name}}</span>
      {{/#loop}} -
      <span>{{{convertMaru("title")}}}</span>
    </a>
  </li>
</script>

<!-- この<ul>の中に変換されたデータが入る -->
<!-- data-url属性でREST APIのurlを指定している -->
<ul class="js-wp-posts-2" data-url="https://####.com/news/newslist"></ul>

JavaScript

// テンプレート
const template2 = document.querySelector('.js-wp-posts-template-2').textContent;
// json取得url
const url2 = document.querySelector('.js-wp-posts-2').dataset.url;
// typeでカスタム方式を指定している
const convert2 = new WpPostsConvert({
  type: WpPostsConvert.TYPE.CUSTOM,
  template: template2,
  target: '.js-wp-posts-2',
});

// ヘルパー関数追加
// 数字を丸数字にするサンプル
// postに記事一件のデータが入り、keyには項目名（ここではtitle）が入る
convert2.addHelper('convertMaru', function(post, key){
  let output = post[key];
  output = output.replace('1', '①');
  output = output.replace('2', '②');
  output = output.replace('3', '③');
  output = output.replace('4', '④');
  output = output.replace('5', '⑤');
  output = output.replace('6', '⑥');
  output = output.replace('7', '⑦');
  output = output.replace('9', '⑧');
  output = output.replace('9', '⑨');
  output = output.replace('0', '⓪');
  return output;
});

// Promiseが返されるので、完了後に console.log() を実行
convert2.start(url2)
.then(function(list) {
    console.log("変換したものを配列で受け取る");
    console.log(list);
});

Methods

コンストラクタ

constructor(option: TOption = {})

TOption

| 引数 | デフォルト | 備考 | | ---- | ---- | ---- | | type※必須 | WpPostsConvert.TYPE.REST | WpPostsConvert.TYPE.REST : Wordpress REST API を使用する / WpPostsConvert.TYPE.CUSTOM : 付属の page-newslist.php を使う場合 | | template | <li><a href="{{link}}">{{title}}</a></li> | 表示テンプレート | | target | '.js-wp-posts' | 出力先のDOMセレクター | | helpers | {remove_tag, convert_date} | ヘルパー関数 |

start(url)

start(url: string): Promise<any>

jsonを取得し、変換、表示を行う。 Promise を返すので成功した場合は .then(list) で変換後リストを受け取れる。

戻り値：Promise

| 引数 | 型 | 備考 | | ---- | ---- | --- | | url | String | json URL |

addHelper(name, func)

addHelper(name: string, func: THelperFunction): void

ヘルパー関数を追加。

| 引数 | 型 | 備考 | | ---- | ---- | --- | | name | String | 関数名 | | func | THelperFunction | 関数 |

THelperFunction

ヘルパー関数は必ず引数postを付ける。 変換した文字列を戻す。 追加の引数は無くてもOK。

THelperFunction = (post: TWpData, ...args: any) => string;

Template

単純な変換

<img src="{{eyecatch}}">
{{title}}

ループ（カテゴリーで使用）

{{#loop categories}}
<span>{{name}}</span>
{{/#loop}} -

ヘルパー関数

{{{convert_date("date","YY年MM月DD日")}}}

ヘルパーの引数は必ず「""」を使う。「''」ではエラーになる。

使用できる項目

• id
• date
• title
• link
• eyecatch
• acf
• categories

Helper

Wordpressから受け取った文字列を埋め込むだけなら不要だが、日時のように書式変換したい時は独自にヘルパー関数を追加することもできる。

注意点

ヘルパーの呼び出しで引数を与える時は必ず「""」を使う。「''」ではエラーになる。

標準で搭載しているヘルパー

convertDate(フォーマット)

投稿日を好きなフォーマットに変換する。

<!-- テンプレート -->
{{{convertDate("YY年MM月DD日")}}}

<!-- 出力結果 -->
2017年12月10日

| 識別子 | 内容 | | --- | --- | | YY | 年（4桁） | | MM | 月（1-2桁） | | DD | 日（1-2桁） | | hh | 時（1-2桁） | | mm | 分（1-2桁） |

removeTag(項目)

htmlタグを除去する。

<!-- オリジナルデータ<post.title> -->
<strong>これはすごい！</strong>

<!-- テンプレート -->
{{{removeTag("title")}}}

<!-- 出力結果 -->
これはすごい！

独自でヘルパーを作る

例：任意の項目の数字を丸数字にする

converter.addHelper('maru', (post, key) => {
  let output = post[key];
  output = output.replaceAll('1', '①');
  output = output.replaceAll('2', '②');
  // ...
  output = output.replaceAll('9', '⑨');
  output = output.replaceAll('10', '⑩');
  return output;
}

{{{maru("date")}}}
{{{maru("title")}}}

例：ACFの項目を使う

Advanced Custom Fieldsで用意したカスタムフィールドを使う。 ここではfavoriteColor、favoriteFoodを使っている。 使用する項目は関数内で指定しているので、引数はpostのみ指定している。

converter.addHelper('acf', (post) => {
  const color = post.acf.color;
  const food = post.acf.food;
  return `<span style="color:#${color}">好きな色</span> <span>好きな食べ物：${food}</span>`;
}

{{{acf()}}}

License

MIT