blog

Simple GA Ranking For Shifter Static

Shifter Advent Calendar 2020の20日目の記事。Simple GA RankingをShifter Static でも使いたい!という検証です。

この記事はShifter Advent Calendar 2020の20日目の記事です。

Shifterって?という方はShifterの中の人の赤塚さんによる1日目の記事を読むとよいでしょう。


Simple GA Ranking ?

Simple GA RankingはWordPressとGoogle Analyticsを連携させて人気記事ランキングを取得するプラグイン。

Google Analyticsからデータを取得するので、記事へのアクセスごとにデータベースに書き込むプラグインと比べて軽量に動作する。

公式サイトにはマニュアル動画も用意されていて、セットアップもこの手順通りにやればだいたい迷わずに設定できる。

Simple GA Ranking の設定マニュアル動画。クセになるBGMだ。

mt8もプラグインメンテナーとしてこのプロジェクトに参加している。(更新ができていないのは追々、、、)

Shifter Static でも使える(、、だが!)

Shifter StaticでもSimple GA Rankingを設定して使用することは可能だ。

ただし、表示されるランキングはShifterでジェネレート(静的書き出し)を行った時点で取得したものとなる。

つまり、ジェネレートを頻繁に行わないサイトの場合だとランキングの表示が次にジェネレートするまで変わらないということになる。

・・・惜しい。これはどうにかしたい。

Shifter Staticで静的化されたWordPressサイトからGoogle Analyticsの最新データが取得できれば人気記事だけではなく、関連記事なども実現できる可能性がある

これはどうにかしたい、、、!


ちなみに

静的化する上で避けられないWordPress運用における動的処理の代表格である「お問い合わせフォーム」・「サイト内検索」・「コメント」については

Shifterが公式ブログで外部サービスとの連携する方法を紹介してくれているので是非確認してほしい。

https://support.getshifter.io/en/collections/1394677-contact-forms

https://support.getshifter.io/en/articles/762156-integrating-algolia-search-with-wordpress

https://support.getshifter.io/en/collections/1394686-wordpress-comments

解決したい内容を整理してみる

「Shifter Staticで人気記事ランキング」を実現させるために必要となる要件を書き出しておく。

  • 静的化されたサイトに人気記事ランキングを埋め込む
  • ランキングデータはGoogle Analyticsと連携する
  • サイトアクセス時の最新のランキングを表示する

以上を実現するために、この記事ではSimple GA Ranking for Shifter Staticができないか実験していく。


Simple GA Ranking for Shifter Static

STEP1:WordPressの設定

Shifterにサインアップ・サイト追加をし、WordPressを立ち上げたらパーマリンク設定を以下にしておいた。

/%post_id%/

これで https://example.com/{記事ID}/ で静的書き出しが行われる。

STEP2:Google Analyticsアカウント

アカウント作成時の注意点としては「プロパティ」をユニバーサルアカウントとして作成すること。

手順は以下

①、「プロパティの設定」で”詳細オプションを表示”する

「プロパティの設定」から、詳細オプションを表示する

②、「ユニバーサルアナリティクス プロパティの作成」にチェックを入れる

「ユニバーサルアナリティクス プロパティの作成」にチェックを入れる

STEP3:カスタムディメンションの設定

記事の詳細ページへのPVのみをランキングデータとするためにGoogle Analyticsのカスタムディメンションを設定しておく。

ここでは次のように設定しておいた。

名前post
範囲ヒット
アクティブチェック(有効化しておく)
カスタムディメンションの設定
カスタムディメンションを定義

この設定をしておくことでGoogle Analyticsに記事詳細ページのPVであることを明示的に送信することができる。

作成したカスタムディメンションの「インデックス」の数値はこのあと使うので覚えておく。(スクショの場合は1)

STEP4:WordPressからGAにPVカウントを送信

以下のコードで、記事詳細へのアクセス時にGoogle AnalyticsにPVカウントを送信した。

参考記事:gtag.jsでページビューのときにカスタムディメンション送信

カスタムディメンションが意図した通りに送信されているかは

Google Analtytics > 行動 > サイトコンテンツ > すべてのページ にアクセスし

「セカンダリディメンション」から作成したカスタムディメンションを選択する


もしくは、公式レポートツールのQuery Explorerを使ってもよいだろう。

次のようなパラメータで実際にサイトで取得したいランキングを問い合わせてみる。

idsga:から始まるビューID
start-dateyesterdayPV集計期間From
end-datetodayPV集計期間To
metricsga:pageviewsPVを取得
dimensionsga:pagePath, ga:pageTitleパス, タイトルを取得
sort-ga:pageviewsPVの降順で取得
filtersga:dimension1==postカスタムディメンションはpost

実行してデータが取得できていればカスタムディメンションが計測されていることになる。


Google Analytics APIをどのように実行するか

サイト訪問者がアクセスした時点でのランキングをリアルタイムに表示させたいので、Google Analytics APIはブラウザ側(javascript)から実行させることにする。

しかし、通常API実行のためのアクセストークン取得にはOAuth2認可を行う必要がある。これにはGoogleログインが必要で取得できるトークンには期限がある。

また、javascriptはソースコードが公開されるため、取得したトークンをソースコードで公開するのは問題がある。

そんなときに、GoogleのEmbed APIのページにServer-side Authorizationというページを見つけた。

具体的には以下のような手順となっていた。

  • GCPでサービスアカウントを発行しキーのjsonファイルを取得する
  • GAでサービスアカウント 発行時に作成されたメールアドレスに表示と分析権限を付与する
  • サービスアカウントのキーjsonファイルからサーバーサイドでAPIへのアクセストークンを取得する

※サービスアカウント 取得からAPI実行まではこちらの記事が参考になる:【2019年版】Google Analytics API v4 の使い方(PHP)

この例では取得したトークンをjavascriptソースに記述するようになっており、注釈として以下が添えられていた。

Important!  When you add an access token to the source code of your page, your site’s visitors could use that access token to run any query the service account could run. If your account contains sensitive information, considering adding the service account only to a specific view. You may also want to add a view filter to limit what data the service account can access.

Embed API Server-side Authorization

・・・サーバーサイド?

サーバーレスなShifterを使っているのにサーバーを用意するなんてとんでもない

そこで、今回は以下のようなAPIをserverless frameworkで構築することにした。

  1. サービスアカウントのAPIアクセストークンを取得
  2. アクセストークンを使ってGoogle Analyticsからランキングデータ取得

(このAPIを SGA4SS API と呼ぶことにする。)

SGA4SS APIをserverless frameworkで構築

serverless framework ?

Serverless Advent Calendar 2020の18日目の記事:Serverless Framework はじめの一歩という記事を読んでみるといいだろう。

ここではserverless frameworkの詳しい解説はしないが、ソースコードはGithubに上げておいた。

https://github.com/mt8/sga4ss

※なんでPython?:Embed APIのサーバーサイド認証のサンプルコードがそうだったから

このAPIの注意点

実際にAPIを公開するときにはスロットリングやキャッシュなどをきっちり管理した方がよいと思われる。(APIのURLは公開するので誰でも実行可能)

GA側ではフィルタ機能などを使って、「見られてもいいビュー」を作っておくのがよいと思われる。

***ご利用は自己責任でお願いする***


SGA4SS WordPress Pluginでデータ取得・表示

用意したSGASS APIはWordPress側では [sga4ss] というショートコード でデータを取得してリスト表示することにした。

コードは以下のようなものになる。


・・・記事ランキングにアイキャッチ画像も付けたい

アイキャッチの取得についてはShifterの場合だと少し工夫が必要だった。

なぜならGoogle Analyticsから取得できるのはページパス(投稿ID)だけで、javascriptからでは投稿IDだけ取得できてもアイキャッチ画像を取得することはできない

Shifterサポートのお兄様たちに相談したところ、以下の方法を教えてもらった。(1時間で解決した)

①、/wp-json/wp/v2/posts/{ID} にアイキャッチ画像のURLを含める

以下のコードで、WP REST APIの/posts/{ID}にアイキャッチ画像のURLを追加することができる。

②、/wp-json/wp/v2/posts/{ID} も静的書き出し対象に含める

以下のコードでShifterの静的ファイル出力対象にアイキャッチがある投稿については/post/{ID}をjsonファイルとして含めることができる。

参考:Appending URLs to the artifacts

これでGA APIから取得した投稿IDからアイキャッチ画像を取得することができた。

抜粋になるが、コードだと以下の部分になる。


最後に

実際にShifter Staticで書き出したサイトを貼っておく。

ページ最下部の人気記事ランキングの部分が紹介した方法で実装した部分だ。

https://dazzling-mestorf7276.on.getshifter.io/

いつまで残すかは未定

今回作ったコードは以下に上げているので同じようなことにチャレンジする人の参考になれば嬉しい。

SGA4SS API (Serverless framework): https://github.com/mt8/sga4ss

SGA4SS (WordPress Plugin): https://github.com/mt8/sga4ss-wp

***ご利用は自己責任でお願いする***

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

<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\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に表示させる方法

プラグインへのお問い合わせが増えているので、よくある質問ページを準備しました。本プラグインについて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)

テンプレート内でコメントアウトされている項目名は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の登録が終わっている状態で、ショートコードを利用した商品リスト表示(デフォルトテンプレート使用)まで一律 10,000円(税別)となります。

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