AMP対応したブログで人気記事ランキングを出したい | 画像40枚【ワードプレス】


人気記事を出すために、
プラグインのWordPress Popular Postsを使用しているワードプレスユーザーは多いと思います。
しかし、AMP対応するとWordPress Popular Postsは使えないっぽいのです。

また、当ブログのようにブロックテーマ対応していると、
現時点でブロックテーマに対応している人気記事を出すプラグインはほぼ皆無。
人気記事ランキングごときで難易度がベリーハードです。

当面対策はSimple GA Ranking + ショートコードです。

手順概要

  • ワードプレスの設定
  • Google Cloud Platform(Google Analyticsライブラリ)の設定
  • ワードプレスとGoole Cloude Platformの連携(OAuth認証の登録)

ワードプレス側の設定

まずプラグインSimple GA Rankingを入れます。

有効化

Analytics設定とSimple GA Rankingが追加されます。
Analytics設定に移動します。

Google API Consoleをクリック

Google Cloud Platform(Google Analyticsライブラリ)の設定

プロジェクトを作成

プロジェクト名は何でも良いですが、
今回はSimple GA Ranking Projectとしておきます。
作成

追加されました。

ハンバーガー → APIとサービス → ライブラリ

Analyticsと入力してエンター

Google Analytics APIをクリック

有効にするを選択

認証を作成

APIを選択 → Google Analytics API
アプリケーションデータ
いいえ
次へ

サービスアカウント名 → 任意(例:Sample GA Ranking)
サービスアカウントIDは自動入力されます
サービスアカウントの説明 → 任意(例:ブログ人気記事ランキング用)
完了

OAuth同意画面

アプリ名
任意 → (例:Sample GA Ranking)
ユーザーサポートメール → 任意
アプリのドメイン → ホームページのURL
アプリケーションプライバシーポリシーのリンク → 任意
承認済みドメイン → ホームページのドメイン
デベロッパーの連絡先情報 → 任意
保存して次へ

保存して次へ

保存して次へ

ダッシュボードに戻る

ハンバーガー → APIとサービス → 認証情報

ワードプレスとGoole Cloude Platformの連携(OAuth認証の登録)

認証情報を作成 → OAuthクライアントID

承認済みのリダイレクトURI

ワードプレス側の値をコピペ
保存

作成した OAuth 2.0クライアントIDをクリックする

Google Cloud PkatformのクライアントIDとクライアントシークレットを
ワードプレスのGoogle Analytics設定のクライアントIDとコンシューマーシークレットに貼り付け
名称が微妙に違うという・・・。

トークンを取得

アカウントを選択

以下が出たらGoogleの承認待ちとのこと。
対策は後述。

すごい脅してくるが「詳細」を選択

XXXX (安全ではないページ)に移動

続行

保存

トラブルシューティング

承認エラーが出た場合の対策

The developer hasn’t given you access to this app.It’s currently being tested and it hasn’t been verified by Google. If you think you should have access, contact the developer(メールアドレス)

開発者はあなたにこのアプリへのアクセスを許可していません。現在テスト中であり、Googleによって検証されていません。アクセス権が必要だと思われる場合は、開発者に連絡してください

とおっしゃっています。が、無視。

ハンバーガー → APIとサービス → 認証情報

アプリを公開

確認

これで承認エラーは回避できるはずです。

ブロックテーマのエディターでショートコードを追加

ここまで頑張ってもショートコードが使えないと報われません。
僕も最初は諦めました。

ブロックの内容にSimple GA Rankingの項目がないからです。
ただ、ショートコードを使えば行けました。

ショートコードを追加

以下のように記述し保存する。
上記は投稿ページ(固定ページでない)を7日間の範囲で10個まで出すというものです。
詳細は以下の公式ページをご参照ください。

公式ページ:http://simple-ga-ranking.org/ja/

結果

まとめ

毎回思い出すのに時間がかかるので書き起こしました。
手順が多くて面倒です。

おわり

C# DXの設計書 Git GitHub GitHubサーベイ MovingWordpress Python Twapi Visual Studio VSCode Wordpress WPF ソフトウェア開発実演 ツール データサイエンス フォロワーを増やしたい ブログ収益化 ブログ記事整理プロジェクト プログラマーとは プログラミング ワードプレスの引っ越し 僕が会社をやめた理由


コメントを残す

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