タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
WordPressサイトをWP REST API + Nuxt.jsでリニューアルした際のポイントまとめ | ブログ | Glatch（グラッチ） - 夫婦で活動するフリーランスWeb制作ユニット
先日Glatchのポートフォリオサイトをリニューアルしました。 前回の記事では妻がポートフォリオの設計・デザインプロセスに関して投稿してくれました。 今回は実装編です。 普段は技術系の記事はテックブログに書いているのですが、ポートフォリオの宣伝も兼ねているので今回はこちらに投稿します。良かったらテックブログも見ていただけると嬉しいです。 さて技術面に関してはせっかくリニューアルするのでこの機会に新しい技術を試したい、でもWordPressで管理してきた資産はできればそのまま活かしたい、という2つの要望が自分の中にありました。 この2つを両立させるためにコンテンツ管理には引き続きWordPressを使用し、フロント部分にモダンなフレームワークを採用することで要望を満たしました。 検討の結果WP REST API + Nuxt.jsというJAMstackな構成で構築することにしました。 本記事
WordPress『 WP REST API 』#1 ブログを他のサイトに埋め込む方法｜レンタルサーバーナレッジ
複数の Web サイトを運用していて、WordPress で投稿したブログの内容（タイトルやアイキャッチ、公開日など）を別の Web サイトにも表示させたいと思ったことはありませんか？ 同じサーバー上でしたら読み込むのは簡単ですが、別のサーバー上にある WordPress の投稿を参照するのはハードルが高めです。 そこで今回は、WordPress に標準搭載されている『 WP REST API 』を使ってブログの内容を他の Web サイトに表示させる方法を紹介します。 PHP を使わず JavaScript と HTML だけで実装できるので、表示させたい側の Web サイトのサーバーが PHP に対応していない場合も安心です。 目次 WordPress の『 WP REST API 』について 『 WP REST API 』で最新のブログ一覧を取得する方法 他のWebサイトに最新のブログ
WP REST API × NuxtJS で SSG するサイト作り｜TechRacho by BPS株式会社
ebi です。定期ネタの WordPress 芸をやっていきます。 今回は一度やってみたかった WP REST API を利用したサイトに少し手出してみます。 React より Vue.js の方がまだ触ったことあるので NuxtJS を使ってみます。 また、 SSR だとホスティングするサーバをどうするかの問題が出てくるので SSG 前提のサイト構成にしてみようと思います。 そんなわけで実験がてらこう言う構成のサイト作りをやってみることにしました。 GitHub にコードも晒しておくので最終的なコードの細かい詳細見たい方は後で確認してください。 CMS として WordPress を採用している理由 正直自分自身にとって馴染みがある以外の理由は特にないです。 近年、 ContentFul や microCMS などのヘッドレスCMSが台頭してきているので、好みでそう言う CMS を選
WordPress『 WP REST API 』#2 オリジナルのエンドポイントを作成する｜レンタルサーバーナレッジ
前回の記事では、WordPress に標準搭載されている『 WP REST API 』の使用方法と、『 WP REST API 』の post エンドポイントを使ってブログの内容を取得する方法についてご紹介しました。 ▼WordPress『 WP REST API 』#1 ブログを他のサイトに埋め込む方法 今回は『 WP REST API 』に用意されているカスタムエンドポイント機能を使って、より使いやすいオリジナルのエンドポイントを追加して、思いどおりの情報を取得する方法をご紹介いたします。 エンドポイントの追加を行ってみることで、『 WP REST API 』が WordPress の内部でどのような動きをしているのかより深く理解することができます。 目次 『 WP REST API 』のカスタムエンドポイント機能について WordPress にエンドポイントを追加する 追加したエンド
WP REST APIとは WP REST APIはWordPressに投稿した記事やデータにアクセスできるAPI機能のことです。WordPress 4.7以降より、標準で利用できるようになっています。 WP REST API 公式 https://ja.wp-api.org/ なぜ独自のエンドポイント？ WordPressに標準で設定されているエンドポイントで十分な情報が取得できるのですが、アイキャッチ画像やカスタムフィールドの情報を取得するのにちょっと工夫が必要だったり、逆に必要ない情報がたくさん入っていたりします。 これは非常に面倒臭い！ 自分でAPIのカスタマイズはできないものか！と調べたらけっこう情報がありました。 参考にさせてもらったのはこちらの記事。 WP REST API V2にてカスタムエンドポイントを追加するまとめ http://kayakuguri.github.io
WP REST APIを使ったAstroサイトの作り方 | ブログ | 静岡県のホームページ制作 | 6666666 セブンシックス
先日、Javascriptマスターと会話していたら「アイランドなんちゃら」みたいな単語が出たので、後でこっそり調べたところ、「Astro」にたどり着きました。試しにWordPressで構築してある当サイトをAstroでヘッドレス化してみることに。 事前知識ゼロだったので、公式に掲載されているチュートリアルを律儀にこなし、雰囲気をつかんでからいざスタート！ AstroによるWordPressのヘッドレス化をネットで調べても、シンプルなブログサイトに関する情報が多く、いかんせん参考にできる具体的なコードが少なくて苦労しました。せっかくなので、備忘録としてAstroサイトのルーティングまわりとWP REST APIの活用方法について残しておきたいと思います。 実際に作ってみたサイト 当サイト（WordPress）をAstroで（ほぼ）完コピしました。 元サイト：https://www.66666
概要 WP REST API を使った自動化みたいなことを考えているので使えるようになりたい 本番で検証するのは掃除や事故が怖いのでDockerで検証しました Application Passwordsは過去はPluginとして利用でしたが、あるバージョンからは組み込まれているっぽい また、SSLが必須（定義でどうにかなるらしいが探しきれなかった）なので、SSL化するdocker-compose.ymlを用意した 環境 WordPressのバージョンは 5.9.1 でした Docker使って環境を用意する ↑のリポジトリに従って起動・手続きするだけ WordPressの初期設定 これは世にありふれているので割愛します Application Passwordsの設定 WordPressにログインし、左メニューからUsers→All Users→自分のユーザー名→ユーザー編集ページの下部にあ
WP REST APIを利用すると、PHP以外の言語でWordPressのデータが扱えるようになり、とても便利ですよね。（ちなみにREST APIの”REST“は”REpresentational State Transfer”の略。画像のような休憩のRESTじゃないです…） 大体のモダンな言語ではHTTPの送信とJSONデータが扱えるのではないかと思います。（知らんけど） 予め用意されている基本のJSONデータ 投稿データを取得 最新の投稿10件を取得されます。 http://example.com/wp-json/wp/v2/posts ちなみに当サイトのデータ https://illustswitch.com/wp-json/wp/v2/posts データが見辛いわっ！…という場合 Chromeを使用されている場合は”JSON Viewer“というアドオンがおススメです。綺麗に整形し
WP REST APIを元にNuxt.jsのgenerateで記事ページを自動生成してみる（いわゆる動的ルーティング） | ARAKAZE NOTE
せっかくREST APIの情報を元にページを作るならgenerateするファイルは自動で出力したいですよね。 公式ドキュメントのところでいう「動的ルーティング」を使って実現してみましょう。 うまくいけばREST APIを元に自動でディレクトリ構造やhtmlファイルが生成されます。 考え方 nuxt.config.jsにgenerateプロパティを記述、そこに使用するAPI情報を読み込む記述をします。 ここでは読み込んだjsonの配列の中にある、ディレクトリ構造を示す値をrouteに設定していきます。 次に自動生成されるページ用のテンプレートファイルを作成します。 ディレクトリに対して細かく設定することも出来ますがWPのパーマリンクを元にする事を考えると「pages/_.vue」というファイルを作ってしまうのが手っ取り早いかなと思います。 テンプレートファイルは頭文字にアンダースコアを付ける
WP REST APIで独自エンドポイントを登録しキャッシュする方法【WP REST Cache】 | Web技術Tips | ホームページ制作のDOE【横浜】
WP REST API で呼び出す投稿データの数が数千件や数万件になりそうなら、API のデータをキャッシュしたほうがいいです。 この記事では WP REST API の独自エンドポイントを追加する方法と、キャッシュを保存する方法を書いていきます。 API のキャッシュの保存には『WP REST Cache』というプラグインを使用します。 WP REST Cache は一度キャッシュに登録しておくと、投稿の更新や削除をした時に自動でキャッシュの内容が更新されて便利です。 独自エンドポイントの追加方法 register_rest_route() 関数でエンドポイントを設定します。 以下のコードでは /wp-json/vendor/v0/post をエンドポイントに指定しています。 function prefix_register_custom_route() { ///wp-json/ven
WP REST API から記事やユーザー情報を取得できないようにする | WordPressカスタマイズ事例【100ウェブ】
WP REST API から記事やユーザー情報を取得できないようにする WordPressは WP REST API という外部からhttp通信でデータを取得・送信できる仕組みを内部に実装しました。 たとえば、以下のサイトにアクセスすれば当サイトのユーザー一覧情報が見られます。 https://100webdesign.jp/wp-json/wp/v2/users 同様に、当サイトの投稿の一覧情報が欲しければ以下にアクセスすれば見られます。 https://100webdesign.jp/wp-json/wp/v2/posts ほうほう。 ん？ と思った方、いますよね。 投稿は別に良いとしても、WordPressの管理画面のユーザーIDばれちゃってんじゃん。 そうです。WordPressにおいて管理画面のユーザーIDは公開情報に属します。 だから何もしなければ、誰でも見られる状態なのです。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【WordPress】WP REST APIで独自エンドポイントの作り方｜notes by SHARESL
WP REST APIのApplication Passwordsを使う - Qiita
WP REST APIでJSONデータを取得する（基本データ+カスタム要素の追加＆カスタム投稿） - イラ備忘録
www.inside-games.jp
laboratory.kazuuu.net
www.nikkei.com
www.kumabou.com
www.daily.co.jp
soccer-soul.hatenablog.com