WordPressプラグイン「BASE Item List」をバージョン2にアップデートしました

BASEのAPIを使って商品情報をWordPressに埋め込むことができるプラグイン「BASE Item List」をアップデートしました。

主な変更点としては、検索APIの新規受付を停止したことによるAPI認証方式の変更です。

検索APIはいろいろ問題があったらしく、BASEさんから直接お問い合わせを頂くこともあり、今回のアップデートに至りました。

V2にアップデートするとAPI認証をやり直す必要があります。

プラグイン設定画面に新方式のAPI認証の説明を記載しているので、移行をお願いします。

BASE Item List V2の設定ページのスクリーンショット

ショートコード[BASE_ITEM]はそのまま使えますが、パラメータがAPI仕様にもとづいて変更になったので注意してください。

最後に

本プラグインへのサポートについて。

本プラグインはWordPress.orgに公式プラグインディレクトリにオープンソースとして公開しています。

無償で公開していますが、設置サポート等はすべて有償にて承っております。

設置サポートについては、BASE APIの登録が終わっている状態で、ショートコードを利用した商品リスト表示(デフォルトテンプレート使用)まで一律 33,000円(税込)となります。

上記ご確認頂き、お問い合わせフォームより送信をお願いします。

Shifterで対応してくれたら嬉しいこと – oEmbed –

この記事はShifter Advent Calendar 2019の18日目の記事です。

前日の記事はmiminariさんのShifterとgridsomeと私とNetlifyと(Gutenbergと)です。

Shifterって何?という方は赤塚さんによるShifter Advent Calendar 1日目、はじめてのShifterをチェックしてみましょう。


静的ジェネレーターが故の制限

ShifterはWordPressを静的ファイル群に変換し、ホスティングを行うサービスです。WordPressサイトはShifterの管理画面から必要な時だけ起動し、記事の作成などが終わったら停止させておくことができます。

WordPressを常時稼働させる必要がないため、セキュアに運用することができます。そしてWordPressコアは起動する度に最新のバージョンに自動的にアップデートされます。

ShifterでのWordPress運用の基本フローは次の通り。

  1. Shifterにログイン
  2. Shifter内で作成しているWordPressを起動・ログイン
  3. 記事作成などを行う
  4. WordPressを停止
  5. 静的ファイルに変換・配信

ステップ5でWordPressは静的ファイル群に変換されることになります。

静的ファイルに変換されるため、公開サイトでは当然PHPプログラムを動作させることはできません。

そのため、以下のようなWordPress機能やプラグインを使う動的な仕組みを使用することができません。

  • お問い合わせフォーム
  • コメント
  • サイト内検索

それらの制限に対するShifterからの提案

これらの機能を使わなければならないサイトの場合、Shifterを利用することができないのか?

いいえ。Shifterチームはそれらに関していくつかの方法を提案をしてくれています。

例えばお問い合わせフォームの場合、ShifterチームがWordPress公式プラグインディレクトリに公開しているWP Serverless Formsを使用することで、Shifter内で作成したWordPressで使い慣れたContact Form 7を使うことができるようになります。

またコメントの場合はDisqus Comment Systemを、

サイト内検索の場合は、Algoliaなどのサービスを使用することができます。


対応してくれたら嬉しい「 oEmbed」

oEmbedとはサイトのコンテツを他のサイトに埋め込むための統一規格です。

詳細な仕様はhttps://oembed.com/で定義されています。

WordPressが提供しているoEmbedの機能は次の通りです。

  • 自サイトコンテンツ内にoEmbed対応コンテンツを展開する
  • 他サイトからのoEmbed埋め込みに対応する

自サイトコンテンツ内にoEmbed対応コンテンツを展開する

YouTubeの場合、埋め込みたい動画URLをエディタ内に記述するだけで展開されます。

YouTube動画のUR:Lhttps://youtu.be/LezbkeV059Q を本文に埋め込むと展開される。

oEmbedによる他サイトのコンテンツ埋め込みは、2009年12月(10年前!!)にリリースされたWordPress 2.9に搭載されました。

リリースノート(日本語訳)には次のように記載がありました。

より簡単な動画埋め込み機能により、URL を独自の行にペーストするだけで適切な埋め込みコードに魔法のように変換できるようになりました。oEmbed に対応している YouTube、Daily Motion、Blip.tv、Flickr、Hulu、Viddler、Qik、Revision3、Scribd、Google Video、Photobucket、PollDaddy、WordPress.tv の URL が使えます(次のリリースでもっと増える予定です。

https://ja.wordpress.org/2009/12/19/wordpress-2-9/

現在サポートされているoEmbed埋め込み先は公式ドキュメントにまとめられています。

この、他サイトのoEmbed埋め込み機能はShifterでも使用可能です。

コンテンツに埋め込んだURLがoEmbedに対応している場合は、静的ファイル作成時に埋め込みコンテンツが展開された形で保存されます。


他サイトからのoEmbed埋め込みに対応する

2015年12月にリリースされたWordPress 4.4から、oEmbedに対応しているサイトのコンテンツを埋め込めるだけではなく、WordPress自身もoEmbedに対応して他サイトからの埋め込みに対応しました。

oEmbedプロバイダーとして振る舞えるようになったということですね。

リリースノート(日本語訳)には次のように記載がありました。

他の WordPress サイトに投稿を埋め込めるようになりました。エディターに投稿の URL を入れるだけで、設定したタイトル、抜粋、アイキャッチ画像を備えた埋め込みプレビューがすぐに表示されます。さらに、サイトアイコンやコメント・共有用リンクも含まれます。
投稿の埋め込みに加えて、WordPress 4.4 では新しい oEmbed プロバイダを5つ追加しました。Cloudup、Reddit コメント、ReverbNation、Speaker Deck、VideoPress です。

https://ja.wordpress.org/2015/12/10/clifford/

では、WordPressはoEmbedプロバイダーとしてどのように振る舞うのでしょうか?

oEmbedに対応しているページのソースコードを確認すると次のコードが<head>タグ内に出力されていることが確認できます。

<link rel="alternate" type="application/json+oembed" href="https://ja.wordpress.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fja.wordpress.org%2F2015%2F12%2F10%2Fclifford%2F" />

これはoEmbedプロバイダーとして振る舞うためのoEmbed Provider APIのエンドポイントに記事URLをパラメータとして渡しているものとなっており、次のようなレスポンスが返されます。

{
"version": "1.0",
"provider_name": "日本語",
"provider_url": "https://ja.wordpress.org",
"author_name": "odyssey",
"author_url": "https://profiles.wordpress.org/odysseygate/",
"title": "WordPress 4.4 “Clifford”",
"type": "rich",
"width": 600,
"height": 338,
"html": "
WordPress 4.4 “Clifford”
\n\n<!--//--><![CDATA[//><!--\n\t\t/*! This file is auto-generated */\n\t\t!function(d,l){\"use strict\";var e=!1,o=!1;if(l.querySelector)if(d.addEventListener)e=!0;if(d.wp=d.wp||{},!d.wp.receiveEmbedMessage)if(d.wp.receiveEmbedMessage=function(e){var t=e.data;if(t)if(t.secret||t.message||t.value)if(!/[^a-zA-Z0-9]/.test(t.secret)){var r,a,i,s,n,o=l.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),c=l.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]');for(r=0;r<c.length;r++)c[r].style.display=\"none\";for(r=0;r<o.length;r++)if(a=o[r],e.source===a.contentWindow){if(a.removeAttribute(\"style\"),\"height\"===t.message){if(1e3<(i=parseInt(t.value,10)))i=1e3;else if(~~i<200)i=200;a.height=i}if(\"link\"===t.message)if(s=l.createElement(\"a\"),n=l.createElement(\"a\"),s.href=a.getAttribute(\"src\"),n.href=t.value,n.host===s.host)if(l.activeElement===a)d.top.location.href=t.value}}},e)d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",t,!1),d.addEventListener(\"load\",t,!1);function t(){if(!o){o=!0;var e,t,r,a,i=-1!==navigator.appVersion.indexOf(\"MSIE 10\"),s=!!navigator.userAgent.match(/Trident.*rv:11\\./),n=l.querySelectorAll(\"iframe.wp-embedded-content\");for(t=0;t<n.length;t++){if(!(r=n[t]).getAttribute(\"data-secret\"))a=Math.random().toString(36).substr(2,10),r.src+=\"#?secret=\"+a,r.setAttribute(\"data-secret\",a);if(i||s)(e=r.cloneNode(!0)).removeAttribute(\"security\"),r.parentNode.replaceChild(e,r)}}}}(window,document);\n//--><!]]>\n

"
}

WordPressのエディタはこのjsonレスポンスからコンテンツの展開を行います。

/wp-json/oembed/1.0/embedエンドポイントのバックエンド処理はPHPの役割となり、Shifterで作成された静的ファイルからはこの機能を使用するこができません。

Shifter開発チームに「oEmbed埋め込み使えたらいいのになー」とそれとなくお願いしてみたところ、2019年11月22日のリリースにoEmbedに関する内容がありました。

静的化時に外部埋め込み用(embed)ページの生成が追加されました
これまでShifterでWordPressサイトを静的化した際に、 「 https://パーマリンク/」のみ出力されていましたが、「https://パーマリンク/embed/」 も一緒に出力可能になりました。
これにより、Shifter上のサイトを「https://パーマリンク/embed/」を利用して他のサイトに iframe 埋め込み可能になります。

Shifterで静的化したサイトにカテゴリ・タグのフィードと外部埋め込み用(embed)ページが含まれるようになりました。

これはどういうことかというと、oEmbedプロバイダーとして振る舞えるようになったWordPress4.4からは「記事URL/embed」というエンドポイントが追加されており、この記事「URL/embed」も静的ファイル出力時の対象するようになったのです!(出力はオプション)

先ほどのWordPress 4.4のリリース記事(日本語版) を例にすると、以下のURLとなります。

https://ja.wordpress.org/2015/12/10/clifford/embed/

アクセスすると埋め込み用のカード形式のHTMLが出力されているページであることが分かります。

/embedにアクセスした際の表示

右下の共有ボタンをクリックすると、このページを埋め込むためのオプションが表示されます。

/embedページの埋め込みオプション

この「HTMLでの埋め込み」には、/wp-json/oembed/1.0/embedエンドポイントのjsonレスポンスの”html”に相当するHTMLコードがセットされているので、埋め込みに使用することができます。

実際にこのコードを埋め込んだ例が以下となります。


WordPress 4.4 “Clifford”


実用する上では、iframeの高さを調整するなどが必要ですが、埋め込むことはできました。

もう少し!

URLを貼りつけるだけで埋め込むことができるというoEmbedプロバイダーの本来の振る舞いをするにはもう少し工夫が必要そうです。

Shifterでジェネレートされたサイトの記事URLを、他のWordPressのエディタに貼り付けたときに自動で展開されるのが理想です。

ただ、Shifterチームは先ほどのリリースノートで次のように書いてくれているので楽しみですね!

※ JSON-APIによるWordPress連携(WordPress Embed)は今後対応予定です。

https://www.digitalcube.jp/shifter/10776/

WordPressとAWSサーバーレスアーキテクチャを得意とするShifterチームがどのようなアプローチでこの機能を実現してくれるかとても気になりますね!

ちなみに、WordPressを静的出力するプラグインや、他の静的ジェネレーターサービスでこのoEmbedにしっかり対応できているものは今のところ存在しないようです。(当方調べ)

個人的には対応していると便利かなと思っているのですが、どうでしょうか?


最後に

19日目はkamesanzzzさんによる、「失敗しまくった話の予定・・・」です!

WordCamp Hong Kong 2019 #WCHK2019 に参加してきました

2019年10月12日に香港で開催されたWordCamp Hong Kong 2019に参加してきた際のレポートです。

海外のWordCampに参加するのは2回目です。

参加の経緯

今年の5月に出版した『WordPressのやさしい教科書。 手を動かしながら学ぶ実用サイト作りと正しい運用 5.x対応版』にレビューチームとして協力してもらった、香港在住のChiaki Kounoさんから、「香港で10年ぶりのWordCampがあるよ!」というのを聞いて、すぐに「あ、行こう」と思いました。

個人スポンサー申し込み

5月の末ごろにスポンサーの募集が始まったので、そのタイミングで申し込みをしました。

スポンサー特典はこんな感じでした。

Support (HK$1,000/US$125)
- Logo on WordCamp Hong Kong brochure
- One WordCamp Hong Kong T-shirt
- One WordCamp Hong Kong ticket

WordCamp Taipei 2018の時にも感じたことなのですが、海外のWordCampに参加するときは個人スポンサーパッケージで登録するのがオススメです。

一般参加と比べると価格は高くなりますが、スピーカーディナーに招待してもらったり、Tシャツがもらえたりします。そして何より、オーガナイザーチームに参加前から自分の存在を認識してもらえるので、コミュニケーションがとても取りやすいのでオススメ。

香港への航空券購入

今回、香港への移動には香港エクスプレスというLCCを利用しました。

香港エクスプレスは日本の以下の空港から就航しています。

  • 福岡
  • 広島
  • 石垣
  • 鹿児島
  • 熊本
  • 長崎
  • 名古屋
  • 沖縄
  • 大阪(関西)
  • 宮古(下地島)
  • 高松
  • 東京(羽田)
  • 東京(成田)

こうして見ると、日本全国から行きやすいことが分かりますね。

今回は、滞在先の沖縄県からの移動だったので、2019年3月にOPENした下地島空港を利用しました。

ちなみに下地島空港 – 香港の往復の料金はこんな感じ。

香港エクスプレスの価格

預け荷物の予約と座席指定をしなかったら往復で2万円を切る感じです。

香港へ

下地空港から香港エクスプレスに乗り込む

沖縄でたっぷり遊んだ香港の人たちに混じって飛行機に乗り込みます。

夕方発の便なので、到着は香港時間の19:30予定でした。

せっかくなので機内食&ビールも注文してみました。

香港のクラフトビール hEROS BEERが美味しかった…。

うとうとしていたら、あっという間に香港に着きました。

香港でのネット環境とか

事前にAmazonでSIMカードを購入していたので、機内でiPhoneに入れました。

APN設定等必要なく、差し替えるだけで空港到着後から利用することができました。やっぱりSIMフリーはいいですね。

空港で測定した速度は6.4Mbps。特にストレスなく利用できるレベルでした。

Amazonで購入した香港SIMの速度

香港空港から宿へ

香港ではUberが利用可能なので、空港の所定のピックアップポイントから、Airbnbで予約していた宿がある上環エリアまで乗車しました。

香港空港から香港島へのUber乗車履歴

所用時間は30分ぐらいで、料金は350HKぐらいでした。日本円にすると4,800円ぐらい。

バスや、MTR(地下鉄)を使って移動するともっと安くすむようですが、今回は3人での移動だったのでUberでいいかなと思いました。

香港観光

スピーカーディナーに参加したかったのですが、宿にチェックインした時刻のが21時で、すでにスピーカーディナーが終了していました。。

当日の香港は雨予報でしたが、幸い晴れていたので少し観光することにしました。

宿の上環エリアからUberで15分ぐらいで景色のいい場所にいけるのでサクッと行ってきました。

ビクトリアピークからの夜景

元祖「100万ドルの夜景」こと香港の夜景です。

蒸し暑い香港の夜ですが、山の上の方にいくと気持ちい風が吹いていたので、しばらく夜景を眺めたり写真を撮ったりしていました。

イベント当日

朝飲茶

早起きして有名な飲茶店「居香蓮」に行きました。

香港の有名な飲茶店「居香蓮」

店内は相席スタイルで、地元の人に混じって飲茶を楽しむことができます。

「居香蓮」の店内の様子

席についても注文は取りにきてくれません。

食べたいものは、おばちゃん達が押しているワゴンから選びます。

店内はワゴンが巡回している

ワゴンは店内を巡回しているので席で待っていてもいいですが、人気のメニューはすぐになくなってしまうので、席についたポジションによっては回ってこないことも・・・。

なので、ワゴンを追いかけて何が入っているかを確認するのがいいでしょう。

ワゴンの中には熱々の飲茶が

食べたいものが決まったら指差しで「これが食べたい!」と伝えて、着席に渡されるスタンプカードを渡して、スタンプを押してもらいます。

食後はこれをレジに持って行って会計します。

スタンプが伝票

いろいろ食べたので、写真で紹介。エビ焼売がとにかく美味しかった・・・。

会場へ

会場は「Campfire」というコワーキングスペースでした。

飲茶を満腹まで食べてしまったので、電車移動が辛くなったので再びUberで移動しました。

飲茶店からWordCamp会場までUberで移動

会場は香港島のメインエリアからは外れた場所にありました。

WordCamp入り口のサイン

エレベーターのポースターには、”We are BACK!”の文字が。10年ぶりの開催への意気込みが伝わってきます。

会場エレベーターに貼ってあったポスター

会場は古いビルをリノベーションしたおしゃれなコワーキングスペースでした。

当日スタッフをやることになっていたので、Tシャツに着替えてスタンバイ。

きれいな会場

ノベルティ

受付でノベルティが入ったトートバッグをもらいました。生地がしっかりしていていい感じ。

会場でもらったノベルティ入りのトートバッグ

中身はTシャツ・ステッカーでした。

100HKの参加チケットで、このノベルティとアフターパーティー付きはとてもお得。すばらしい!

ノベルティ

オープニング

もろもろ打ち合わせや当日の動きなど確認していたら、続々と参加者のみなさんがご来場。

普段ミートアップなどで交流があるのか、わいわい盛り上がっていました。

時間になったのでオープニングセッション。

リードオーガナイザーのIvanさんから、まずは10年前のWordCamp Hong Kong 2009の紹介。

当時のWordCampの参加者のIvanさんが10年後にリードオーガナイザーで再びWordCampを開催するという素敵なストーリー。そしてMattが若い(笑)

参加したセッション

WordCamp Hong Kong 2019では、香港の公用語「広東語」と英語のセッションが半分ずつありました。

香港のみなさんは英語が話せる人が多いようで、MCも英語・広東語が入り混じって行われていたのが、印象的でした。

タイムキーパーの役割を仰せつかったので、特等席で堪能したセッションをいくつか紹介します。(すべてのセッションは後日WordPress.tvにて公開されるはずです)

How to Use WordPress for Affiliate Marketing? 

Mack ChanさんによるアフィリエイトマーケティングにWordPressを活用するためのノウハウが詰まったセッション。

Mackさんが運営する、https://wp-valley.com のノウハウがつまったセッション。スライド

How to Increase Your SEO Traffic Thanks to WordPress

Killian Kostihaさんによる、Googleなどの検索エンジンからサイトへのトラフィックを増やすためのノウハウが詰まったセッション。

キーワードの選び方や、検索エンジンがどのように解釈されるかを考えるだけでなく、百度(バイドゥ)についても触れられていたあたりがローカル感のある内容だなと思いました。スライド

Contributing to the WordPress Mobile Apps

Cesar TardaguilaさんによるWordPress モバイルアプリへのコントリビューションに関するセッション。Cesarさんのセッションを聞くのはWordCamp Taipei 2018と合わせて2回目でした。

世界中のメンバーとの開発サイクル・リリースサイクルなどのコラボレーションに関するノウハウが詰まったセッションでした。スライド

How to Hack & Defend a WordPress Site

Henry DalzielさんによるWordPressのセキュリティに関するセッション。

攻撃者がどのようなツールを使ってWordPressに攻撃をしかけるのかを、実際に攻撃しながら!紹介しつつ、それに対する防御方法も紹介されていました。

また、実際にwp-config.phpが漏洩したものが検索エンジンにインデックスされている生々しい光景も・・・。

よいパスワードの作り方など、すぐに実践できる内容が詰まったセッションでした。スライド

WordPress Site Done, So How to Market It? 

Bernie Wongさんによる、「WordPressのサイトはできた、じゃあどうやってマーケティングする?」というセッション。

広東語のセッションだったので内容は理解できませんでしたが、スライドや喋り方がとにかく聞いている人を惹きつけるセッションだと感じました。

「香港ティッシュ」ことTEMPOのブランド戦略の解析など、マーケティング要素が詰まったセッションでした。スライド

ランチ

WordCamp Hong Kong 2019では参加者にランチのサンドイッチが提供されました。サンドイッチはFISH・MEAT・VEGの3種類。

MEATを頂きました。

クロージング

あっという間にクロージングの時間となりました。

最後はリードオーガナイザーのIvanさんからのトーク。

WordPress 5.2の普及状況やそれに付随するエコシステムなど。

10年ぶりに開催されたWordCamp Hong Kongですが、IvanさんのようにWordCampに参加して何かを感じた人が来年のWordCampを開催するような未来に繋がっていくのかなと思うと楽しみですね。

アフターパーティー

いよいよメインのお時間です。アフターパーティーは会場を移動して、近くのビルのルーフトップバーで開催されました。

イベントをやり終えたスタッフ・イベントに参加した人みんなでWordPressに関する話で盛り上がりました。

17時半から始まったパーティーですが、気づいたら夜に。見事な香港の夜景を楽しめました。

最後に

海外のWordCampに参加すると、普段仕事で使っているWordPressが全世界中で使われていることを再認識することができます。

異なる言葉・文化の人たちと「WordPress」という共通の話題で盛り上がることができるのですごく楽しい。

あと、これから日本から海外のWordCampに参加したいと考えている人に少しだけ現地の人と仲良くなるためのヒントを。

それが、「わぷー」言わずと知れたわぷー。全世界で大人気です。

「これ、僕たちのミートアップのキャラクターなんだ」といってプレゼントすると間違いなく喜んでくれます。

せっかく海外のイベントに参加するのなら、こうやって会話の糸口を見つけてみるとおもしろいと思いますよ。絶対におすすめです。

ということで、10年ぶりに開催されたWordCamp Hong Kong 2019への参加レポートでした。

スタッフのみなさん、本当にお疲れ様でした。

いろいろ困難なことがあったこともあったのかと思いますが、すばらしいWordCampだったと思います。来年も行きます!

そして、また世界のどこかのWordCampでお会いできるのを楽しみにしています!

BASE Item Listのテンプレート機能で、BASEのさまざまな商品情報をWordPressに表示させる方法

この記事はプラグインバージョン1のものです。
2022年8月にリリースしたバージョン2については以下の記事を参照してください。
プラグインへのお問い合わせが増えているので、よくある質問ページを準備しました。本プラグインについてBASEさんへ問い合わせても回答は得られませんのでご注意ください。

mt8が開発・メンテナンスをしているWordPressにBASEの商品情報を表示させるためのプラグイン、BASE Item Listについてです。

プラグインの導入方法は以下のこちらの記事を参考にしてください。

プラグインのデフォルト機能では、以下のように商品タイトル・画像のみのシンプルな一覧表示となっています。

BASE Item Listを使ったBASE商品一覧のWordPressへの表示

サイトによっては、価格などの情報も表示したいケースがあるかと思います。

BASE Item Listではそういったケースに対応するために、BASEの商品情報の各項目をWordPressに連携表示するための「テンプレート機能」を用意しています。

テンプレート機能を使うには以下の3ステップが必要です。

  1. プラグイン内にある「base_items.php」をテーマ内にコピーする
  2. 「base_items.php」に各項目の出力を追加する
  3. 出力項目に合わせてCSSを調整する

1.プラグイン内にある「base_items.php」をテーマ内にコピーする

BASE Item Listのプラグインフォルダは以下のようになっているはずです。

{WordPressルート}/wp-content/plugins/base-item-list
BASE Item Listのインストール場所

「base-item-list」フォルダ内にある、”base_items.php”を利用中のテーマフォルダの中にコピーします。

※移動ではなく、コピーをしてください。このファイルをプラグインから削除すると正しく動作しません。

たとえば、WordPress 5.x系のデフォルトテーマである、Twenty Nineteenをお使いの場合は次のフォルダ内にコピーすることになります。

{WordPressルート}/wp-content/themes/twentynineteen

2.「base_items.php」に各項目の出力を追加する

テーマフォルダ内に「base_items.php」のコピーができたら、VS CodeなどのUTF-8で編集可能なエディタで編集します。

「base_items.php」には必要な情報を出力するためのサンプルがプログラム内にコメントアウトされています。

「base_items.php」の内容は次のようになっています。(BASE Item List ver 1.1.1)

https://gist.github.com/mt8/5fa06848826ac44acfce25cb8418d048

テンプレート内でコメントアウトされている項目名はBASE APIのドキュメントと合わせています。

38行目のコードで、商品の価格(price)を出力しています。

出力時のHTMLエスケープ処理である esc_html WP関数と、数値に桁区切りを追加するnumber_format PHP関数も使用しています。

<参考>

esc_html:https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/esc_html

number_format:

https://www.php.net/manual/ja/function.number-format.php

上記コードを追加すると、画像の下に価格をカンマ編集した状態で表示させることができます。

BASE Item Listで商品価格を表示している状態

3.出力項目に合わせてCSSを調整する

先ほどのコードをサンプルに、価格を赤色にしたいとします。

その場合は次のようなコードを追加する必要があります。

上記例では、価格を囲っているspanタグにbase-item-priceというクラスを付けています。

2.CSSコードを追加する

.base-item-price {
    color: red;
}

お使いのテーマによって、どこにCSSを書くかが変わってきます。

一般的なテーマの場合、管理画面 -> 外観 -> カスタマイズの「追加CSS」に記述することができます。

CSSの詳細については以下のサイトを参考にしてください。

https://developer.mozilla.org/ja/docs/Web/CSS


以上が、BASE Item Listを使って、BASEの商品の細かい情報をWordPressで表示する方法となります。

いろいろな情報が表示できるので、カスタマイズにチャレンジしてみてください。

最後に

本プラグインへのサポートについて。

本プラグインはWordPress.orgに公式プラグインディレクトリにオープンソースとして公開しています。

無償で公開していますが、設置サポート等はすべて有償にて承っております。

設置サポートについては、BASE APIの登録が終わっている状態で、ショートコードを利用した商品リスト表示(デフォルトテンプレート使用)まで一律 33,000円(税込)となります。

上記ご確認頂き、お問い合わせフォームより送信をお願いします。

WordBench終了について

初めに

『サービス終了のお知らせ』というタイトルの記事がwordbench.orgアップされてから数日が経ちました。

WordPressの15周年をコミュニティで祝おう!ということで、第77回のWordBench神戸はカフェを貸し切ってパーティーを行いましたが、ちょうどその時に発表した資料の中で私とコミュニティとの関わりについて振り返っていました。

それに沿う形でWordBenchへの想いを書き残しておこうと思います。

 


WordBenchとの出会い

 5年前の私は会社員プログラマーでした。畑違いの業種から転職して7年が経とうとしていたとき、たまたまTwitterで流れてきたWordBench神戸の勉強会のお知らせが目にとまりました。

ちょうどそのころ、知り合いの会社の手伝いでPHPプログラミングをしていて「WordPress」という言葉は知っていました。

 当時はネット上にWordPressのカスタマイズ方法は今ほどなく、何かいい学習方法はないかと模索していたタイミングに「自分の地域でWordPressの勉強会があったのか!」と驚いたのをよく覚えています。

イベント告知サイトが閉鎖してしまったのですが、インターネットアーカイブで調べたところ私のWordBench初参加は、2013年4月7日の約5年前でした。

 

 「ここまで自分の知識や経験を共有して何のメリットがあるんだろう?」

自分の勤めている会社以外の世界を知らなかった当時の私は率直にそう思いました。

会社で定期的に開催される(というよりも開催を義務付けられていた)”IT系のニュース記事を印刷したものを読むだけの「勉強会」”とは何もかもが違っていました。

SIerでプログラマーをしていた私にはどこか違う世界のように感じていました。

 


WordBench神戸モデレーターに

 週末に開催されるWordBench神戸にたまに顔を出すようになり、初めは行きにくかった懇親会にも次第に参加するようになりました。

そこで安藤さん(NExT Season)と知り合い、気づいたらWordBench神戸のモデレーター(管理人)を2人でやることになりました。

たしか、そのころはWordBench神戸が不定期開催になっていて、今後の継続が難しくなりそうな時期だったと記憶しています。(当時のモデレーターの方達が忙しくなっていた)

 

 「このコミュニティをストップさせたくない」

それだけの意気込みで、モデレーターのバトンタッチ後初めて開催したのが、2014年11月15日の第37回WordBench神戸でした。

「人が集まらなかったらどうしよう?」等、いろいろと悩んだのですが、結果的には勉強会は盛り上がり、懇親会も楽しい時間だったのをよく覚えています。

そこから回を重ね、3年半かけて40回ほどの勉強会+懇親会を企画・開催してきました。

 

  • 他府県からの参加
  • WordBench神戸にだけ参加するという人
  • 1年を通して皆勤で参加(!)する人

いろいろな立場や職種の人とWordBenchを通じて出会うことができました

また、WordBench神戸では勉強会の冒頭に必ず次の言葉を伝えるようにしてきました。

「 WordBench ≠ セミナーです。 」

WordBenchとはコミュニティであり、様々な立場の人が「WordPressというキーワードをもとに集い経験・失敗の共有をする場」だと思っていました。

「今日知った事を、次の誰かに教えてあげてください」

この言葉も意識して何度も伝えてきました。

実際にコミュニティメンバー間で「この前WordBench神戸で聞いた○○っていうプラグインがいいみたいですよ」といった知識の共有がなされているのを目にしたり、耳にしたときには本当に嬉しい気持ちになっていました。

 


WordBench終了について

 すごく驚きましたし、寂しい気持ちにもなりましたが、内容をじっくり読んで「非常に前向きな終了なんだ」と理解しました。

とても素晴らしいご決断だと思っています。

きっと、予期せぬ10年目での終了を迎える事になったのだとは思います。

ただ、この10年でWordBenchによって育った日本のWordPressコミュニティは今後も形を変えながら継続されていくものだと信じています。

 

WordBenchがなかったら、出会えなかった人がたくさんいます。

WordBenchがあったから、多くの人に助けられました。

 

 ・・・最近になって、私がモデレーターを受け継ぐとなった時に「すごく意外だったし驚いた」と思ったということを、とあるコミュニティメンバーから教えてもらいました。

「寡黙なプログラマー」という印象が強かったようでした。

確かに、前に出て何か発言したり発表したりするタイプの人間ではなかったのですが、ここ数年で大きく自分が変わったとは思っています。

またそれに合わせて、「この数年で本当に印象が変わった」と言って頂けたのときに、僕は「WordBench神戸を続けてきてよかった」と思えました。

コミュニティを運営していて、決して楽しいことばかりではなかったですが、少なくとも神戸のWordPressコミュニティを止めずに継続できてよかったと思っています。


9/23以降のWordBench神戸について

約3年半WordBench神戸の管理を共にしてきた安藤さんと、9/23以降の神戸のWordPressコミュニティについて話し合っている段階ですが、決定事項は何もありません。

 

でも、10年も存続したWordBenchの終わりに神戸で何かできることはないか?と考えました。

そんなやり取りの中で「WordBench神戸は9/23に第100回をやって終わりにしよう」というアイディアが湧いてきました。

(この前第79回をやったのであと21回開催することになります。)

「正気か?」という感想ももらっているのですが、真剣にやってみようと思っています。

 

では、なぜWordBench神戸を第100回までやろうと思ったのかを少しまとめておきたいと思います。

 

1.単純にキリがいい

2.たくさん開催することで多くの人に参加してもらえないか?

3.いろいろな開催方法を模索することで、誰かの今後のコミュニティ活動の参考にならないか?

1.単純にキリがいい

WordBenchも10周年の日に終了するのだし、という単純な発想です。

現在79回で、残り約90日で20回。「4日1回開催すれば間に合うペース」ということになります。

2.たくさん開催することで多くの人に参加してもらえないか?

最近足が遠のいている人や、他の勉強会との兼ね合いで参加できていない人が結構いるようなので、そんな人たちにもWordBench終了前に参加して欲しいと思っています。

もちろん、初参加の人にも多く参加してもらえることを期待しています。

もう会えなくなってしまった人もいるけど、そんなことも思い出しながら21回やれたらいいなと思っています。

3.いろいろな開催方法を模索することで今後の誰かのコミュニティ活動の参考にならないか?

当然、通常の開催方法(会場を抑えて参加者で割り勘)では人数が集まらない可能性があるので、月一の定期開催以外の18回についてはオンライン会議での開催や、会場が安く使える夜間での開催なども検討しています。

この18回がどのようになるのかは予測もつきませんが、「神戸でこんなことやってる」という何かが残ればいいかなと思っていて、それが次の誰かにいい形で繋がっていけばよいかなと思っています。

 


第100回WordBench神戸について

9/23(日)で、会場はもう抑えてあります。

神戸三宮の中心街にある、英国風パブ HUB を貸切にしました。(60人まで入れます)

WordBenchの10周年を神戸三宮でお祝いしませんか?

スポーツ観戦用の大きなスクリーンも使えますので、登壇してくれる人も募集します。

詳細は追って報告しますが、今は9/23以降のコミュニティのあり方よりも、9/23日の第100回のことだけを考えたいと思っています。

WordPressの書籍を執筆しました。

WordPressの書籍を執筆しました。