• 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サイトでも紹介したい方にぴったりのソリューションだと思います。ぜひ活用してみてください!

サンプル

ITスキルの市場価値を評価するサイト

ITスキルの市場価値を評価するサイト 各プログラミング言語を「上限年収、下限年収、リモート率、求人件数、Qiitaフォロワー数」の五項目から評価しスコアリングするサイトです。 プログラミング言語からフレームワークにインフラ、開発手法に至るまでエンジニアリングに関わる全てのスキルをスコアリングし...
続きを読む

超初心者エンジニアが入社5ヶ月目でクライアントからの要望をcursorのみで改修

管理画面の改修で学んだこと(初心者 + AI活用編) 🔰 状況 ゲームの管理画面(php、cakephp、Laragon) 業務で初めて既存の管理画面を自走で修正するタスクがきた。 🤔 分からなかったこと どのファイルを見ればいいのか viewとcontrollerのつながり CSSの当て方 ...
続きを読む

PHPerKaigiに参加しての感想

3/22~3/23にPHPerKaigi参加させていただきました。 行かせていただいた会社に感謝です! 聞いた内容の感想を書きます。 BCMathを高速化した一部始終をC言語でガチ目に解説する 直近でBCMathに触れており、私にとって刺さるタイトルで、 C言語は大学で苦労したなーと思い出しながら...
続きを読む

phpのSQL処理で新規登録のidを取得

参考処理 Person.php <?php require_once( dirname( __FILE__ , 2) . '/Mysql_root/MySQL_Data.php' ); class Person{ public $sqlDB; public $dbnam...
続きを読む

Laravel Webスクレイピング機能の搭載 ②

前回の記事 前回の記事に引き続き、lol(League of Legends) の統計サイトから勝率をスクレイピングすることに加えて、「チャンピオンを検索したら動的にその勝率を表示してくれる機能」、「DeepSeekによる検索したチャンピオンの解説機能」を追加しました。 成果物は以下のようになります...
続きを読む
人気記事ランキング
話題のキーワードから探す