• TOP
  • 記事一覧
  • WordPressにQiitaの記事を表示する方法:APIを使った連携ガイド

WordPressにQiitaの記事を表示する方法:APIを使った連携ガイド

更新日:2025/03/11

こんにちは、WordPress愛好家の皆さん!今回は、WordPressサイトにQiitaの記事を表示する方法をご紹介します。QiitaはITエンジニア向けの技術情報共有プラットフォームで、多くの優れた技術記事が投稿されています。自分のブログでQiitaの記事を表示できれば、サイトの価値を高めることができますね。

なぜQiitaとWordPressを連携させるのか?

WordPressサイトにQiitaの記事を表示するメリットはたくさんあります:

  • コンテンツの充実化:自分の書いたQiita記事を自サイトでも紹介できる
  • 技術ブログとしての専門性向上:関連する技術記事を表示して専門性をアピール
  • 訪問者へのより多くの情報提供:自分の記事と関連するテーマの情報を提供

Qiita APIを使ったWordPressプラグインの実装方法

今回は、Qiita APIを利用してWordPressサイトに記事を表示するカスタムプラグインを作成する方法を解説します。

Qiita API連携の仕組み WordPress プラグイン Qiita API ショートコード API リクエスト JSON レスポンス HTML 出力 キャッシュ機能 API呼び出し回数を削減 データフロー 1. WordPressページにショートコードが挿入されると、プラグインが処理を開始 2. プラグインはキャッシュをチェックし、なければQiita APIにリクエストを送信 3. 取得したデータをHTMLに整形してWordPressページに表示

プラグインの主な機能

このプラグインを使うと、以下のことができるようになります:

  • Qiitaの最新記事を表示
  • 特定のユーザーが書いた記事を表示
  • 特定のタグがついた記事を表示
  • パラメータによるカスタマイズ(表示件数、ソート順など)

プラグインの設置方法

  1. WordPressのwp-content/plugins/ディレクトリにqiita-api-integrationフォルダを作成
  2. そのフォルダにqiita-api-integration.phpというメインファイルを作成
  3. WordPressの管理画面からプラグインを有効化
  4. 「設定」→「Qiita API」からQiitaのアクセストークンを設定

アクセストークンの取得方法

Qiita APIを利用するには、アクセストークンが必要です。取得方法は以下の通りです:

  1. Qiitaにログイン
  2. 右上のユーザーアイコンをクリック
  3. 「設定」を選択
  4. 左メニューの「アプリケーション」をクリック
  5. 「新しいトークンを発行する」をクリック
  6. 説明を入力し、必要な権限を選択(読み取り権限のみで十分)
  7. 「発行する」ボタンをクリック

発行されたトークンをコピーして、プラグインの設定画面に貼り付けましょう。

ショートコードの使い方

プラグインをインストールして設定したら、以下のショートコードを使ってQiitaの記事を表示できます。

Qiita API ショートコード一覧 ショートコード 説明 主なパラメータ [\qiita_articles] Qiitaの最新記事を表示
count=”5″ – 表示件数
sort=”created” – 表示順序
[\qiita_user_articles] 特定ユーザーの記事を表示
username=”名前” – ユーザー名
count=”5″ – 表示件数
[\qiita_tag_articles] 特定タグの記事を表示
tag=”php” – タグ名
count=”5″ – 表示件数
sort=”stock” – 人気順に並べ替え
使用例 [\qiita_tag_articles tag=”wordpress” count=”3″ sort=”stock”]

実装時の注意点

Qiita APIを利用する際は、以下の点に注意しましょう:

APIリクエスト制限

Qiita APIには1時間あたりのリクエスト制限があります:

  • アクセストークンあり:60回/時
  • アクセストークンなし:15回/時

頻繁にアクセスするとAPIリクエスト制限に引っかかる可能性があるため、キャッシュ機能を実装することをおすすめします。プラグインではデフォルトで60分のキャッシュを設定しています。

Qiita API実装時の注意点 ! 🔒 APIリクエスト制限
• アクセストークンあり:60回/時
• アクセストークンなし:15回/時
⇒ キャッシュ機能を実装して回避しましょう
セキュリティ対策
• アクセストークンは第三者に漏れないよう注意
• WordPressの設定DBに保存される点に留意
• 最小限の権限(読み取り専用)を付与
パフォーマンス最適化
• 適切なキャッシュ時間を設定(デフォルト60分)
• 表示件数は必要最小限に留める
• 複数のショートコードを同一ページで使用する場合は注意
ワンポイントアドバイス: WordPress管理画面での設定機能を使って、キャッシュ時間やアクセストークンをいつでも調整できます。
定期的なAPIリクエスト状況の確認を行いましょう。

セキュリティ

アクセストークンは秘密情報です。WordPressの設定データベースに保存される形になりますが、外部に漏れないように注意しましょう。

パフォーマンス

APIからのデータ取得はサーバーリソースを消費します。キャッシュ機能を有効にして、不必要なAPIリクエストを減らしましょう。管理画面からキャッシュ時間を調整できます。

WordPress テーマへのショートコード追加方法

Qiita API連携プラグインを設置したら、次はカスタムテーマにショートコードを追加する方法を見ていきましょう。WordPressのテーマ内でショートコードを使用すれば、固定ページやテンプレートの好きな場所にQiitaの記事を表示することができます。

カスタムテーマへのショートコード追加

WordPressのテーマファイル内でショートコードを使用する場合、do_shortcode() 関数を使います。これはとてもシンプルで、特別なヘルパー関数を作成する必要はありません。

基本的な使用方法

テンプレートファイル(single.php, page.php, template-parts/content.phpなど)に以下のコードを追加するだけです:

<?php echo do_shortcode('[\qiita_articles count="5" sort="created"]'); ?>

カスタマイズの可能性

このプラグインは基本的な機能を備えていますが、以下のようなカスタマイズも可能です:

  • デザインのカスタマイズ(CSSの編集)
  • 表示する情報の追加(閲覧数やコメント数など)
  • 他のAPIサービス(ZennのRSSフィードなど)との連携
  • ウィジェット対応(サイドバーに表示できるように)

まとめ

QiitaのAPIを活用することで、WordPressサイトに技術記事を表示し、コンテンツを充実させることができます。このプラグインを使えば、ショートコード一つで簡単に実装できるので、ぜひ試してみてください。

技術ブログを運営している方や、自分のQiita記事をWordPressサイトでも紹介したい方にぴったりのソリューションだと思います。ぜひ活用してみてください!

サンプル

AOJ PG入門 #9

問1.1つの単語 W と文章 T が与えられます。T の中にある W の数を出力するプログラムを作成して下さい。 input 1行目に単語 W が与えられます。 続いて、複数の行にまたがった文章与えられます。END_OF_TEXT という文字列が文章の終わりを示します。 output 単語 W の...
続きを読む

PHPで「while文をネスト」の動作を確認してみた。

概要 PHPで「while文をネスト」の動作を確認してみました。 以下のページを参考にしました。 実装 以下のファイルを作成しました。 sample.php <!DOCTYPE html> <html lang="ja"> <head> <meta...
続きを読む

Laravel+Vercel+Neonを使って無料のデプロイ環境を構築

1. はじめに どこかでVercelでもNext.js以外のアプリをデプロイできるという噂を聞いて、本当かなと思いつつ試してました。 結論、動きます! Laravelで実装したCRUD機能を含む管理画面をVercelにデプロイして実際に運用できています。 ただし、DBはVercelとは別に用意する必...
続きを読む

Apacheサーバの挙動に気をつけろ

【結論】 Apacheはデフォルトでは、index.phpまたはindex.htmlを探す ルートディレクトリにindex.phpだけを置いた状態で、 そのindex.phpをAPIとして、GETやPOSTで返却する値を操作したい時、 併せてルーティングを設定する必要がある 【実例】 Dockerで...
続きを読む

PHPで「while文」の動作を確認してみた。

概要 PHPで「while文」の動作を確認してみました。 以下のページを参考にしました。 実装 以下のファイルを作成しました。 sample.php <!DOCTYPE html> <html lang="ja"> <head> <meta cha...
続きを読む
人気記事ランキング
話題のキーワードから探す