WordPress で Jamstack｜株式会社Romantist
はじめに Next.js + WordPress API で Jamstack を構築してみようかと思います。 便利なヘッドレスCMSはたくさんありますが、プランによってはお金がかかることが多いので。 WordPressのAPI化 まずはWordPressのAPI化です。 WordPressはデフォルトでも特定のURLを叩くことでJSON形式で値を取得することはできるかと思いますが、それだと不要なデータが多くあったりするためfunctions.phpに独自で実装しました。 以下、手順になります。 ①空のテーマを作る wp-content/themes/ 上記ののディレクトリ配下にテーマ用の適当なディレクトリを作成し3つの空のファイルを格納します。 functions.phpindex.php（今回は触らない）style.css（今回は触らない） ②functions.phpに記事取得の処理
Faust.js+WPGraphQLで、カスタムタクソノミーを扱う
WPGraphQLプラグインとFaust.jsを組み合わせれば、クエリを書く手間を省きながら、WordPressをHeadless CMS化できます。しかしカスタムタクソノミーを使おうとすると少し手間がかかるので、手順をまとめました。 WordPress側 WPGraphQLの準備 Composer使うので環境用意して下さい。sage/bedrockがおすすめです。 function custom_register_taxes_games() { $labels = [ 'name' => __( 'ゲーム' ), 'singular_name' => __( 'ゲームズ' ), ]; $args = [ 'label' => __( 'ゲーム' ), 'labels' => $labels, 'public' => true, 'publicly_queryable' => true,
フルサイト編集対応のブロックテーマを作成した感想 - Dustbox
フルサイト編集対応のブロックテーマを作成した感想 信州 WordPress Meetup in 松本 Vol.25に登壇させていただきました。 その時に話した内容のリライト？です。 正直半分くらい愚痴になってるけど悪しからず。 培ってきた知識が転用しづらい クラッシックテーマからブロックテーマへの変更は、基盤の部分になるテーマファイルの変更もあって既存の構築方法からそこそこ変える必要があった。 ご存じの通り PHP から HTML への変更が大分大きい。 PHPからダイレクトに出力することが難しい 今まで PHP そのものであったテーマファイルが HTML に変更され、殆どの場合 PHP で処理した内容を出力したい場合一度ブロックを経由する必要がある。 ダイナミックブロックであっても編集画面では js を通して画面を作る必要があるため、単純に一行程増えている。 クエリループを書いてコンテン
WordPress Popular Postsで表示内容をカスタマイズする
こんにちは、Ryohei（@ityryohei）です！ 本記事では、WordPressWordPress Popular Postsdで表示内容をカスタマイズする方法をご紹介しています。 では、解説していきます。 WordPress Popular Postsのカスタマイズ方法 WordPress Popular Posts(WPP)で表示内容をカスタマイズする例としていくつか方法があります。 ウィジェットのカスタムHTMLテンプレートタグ関数によるフィルターフックQuery(WPP_Query)の利用 参考URL：https://github.com/cabrerahector/wordpress-popular-posts/wiki どの方法を用いてもカスタマイズ可能で、ある程度であれば理想とする表示内容にできるようになっていますが、本記事ではQuery（WPP_Query）クラスを用
えっ！830MB！？WordPressのデータベースがめちゃくちゃ肥大していた件 | タラコハウス
何を隠そうこのサイト（taracohouse.com）でのお話です。 当サイトはWordPressで運営しており、BackWPupというプラグインで定期的なバックアップをとっています。バックアップは深夜自動的にFTP経由で他のサーバへと送られる全自動なので、エラーメールが届かないうちはずっと安心して放置していました。 本日、久々に「たまには自サイトのメンテでもするかあー」とデータベースの最適化を試みてビックリ。 ええっ！「データベースの合計サイズ：830.71MB」ってなんやねん！？ 容量が1GBオーバーのバックアップデータはお客様の環境でしばしば見かけますが、通常はメディア（写真や動画など）で容量を消費しているパターンです。データベースだけで800MB越えとか初めて見ました。 まして現時点でページ数50ページにも満たないサイトなのにおかしい・・・明らかにおかしい。。 不自然に肥大したwp
これは便利！WordPressのWP_Queryでよく使うコードスニペット | それからデザイン スタッフブログ
WordPressでテーマをカスタマイズしていると、WP_Queryを用いて少し複雑な条件で投稿記事のリクエストをしたいことがあります。 例えば、物件の検索サイトなどでよくみられる「最寄駅」「間取り」「価格」といった複数の条件が一致した記事を絞り込む機能なども、WP_Queryに条件となるパラメーターを送ることで、わざわざ複雑なプログラムを自前で書かなくても、WP_Queryが一括して処理をしてくれるのでとても便利です。 呼び出したい記事の抽出条件がよほどイレギュラーでなければ、WP_Queryで大抵の条件にマッチした記事を呼び出せるのではないでしょうか？ WP_Queryは、多くの抽出条件をカバーしているだけあってパラメーターの組み合わせが豊富です。 新しい仲間とチームでWordPressのカスタマイズをすることが多くなってきたので、今回は、このWP_Queryのパラメーターをスニペット
WPGraphQLを認証ユーザーのみ使えるようにする
WordPressでWPGraphQLを使う場合、デフォルトでは誰でもアクセスおよびクエリの実行が可能ですが、WPGraphQL JWT Authenticationのプラグインを同時にインストールすることで、未承認のユーザーにはエラーが返却され、承認済みのユーザーのみデータ取得できるようになります。 インストールと設定 まず、WPGraphQLの設定画面にある、”Limit the execution of GraphQL…”のチェックボタンをオンにし、認証ユーザー以外のクエリ実行を制限します。 次に、WPGraphQL JWT AuthenticationをGitHubからzip形式でダウンロードし、プラグイン画面で手動でアップロードします。 次に、wp-config.php（※他のファイルでも可）に以下のコードを追記します。 define( 'GRAPHQL_JWT_AUTH_SEC
【開発日誌 #7】WordPress × Nuxt.js でヘッドレスCMSを構築 | Frontend developer's note
WordPressを提案する過程で課題になることの多い 「セキュリティの担保」と「表示速度向上」の対策として、 「WordPressのヘッドレスCMS化」をクライアントに提案したところ採用となりました。 開発におけるポイントに絞って紹介いたします。 【要件】・会員制サイト ・サイト運用側でWordPressの管理画面を使用してコンテンツ登録・配信、会員管理をしたい 【課題】・管理画面の使いやすさや、カスタマイズ性を考慮してWordPressを採用したいが、 WordPressのセキュリティ面がクライアントの社内レギュレーション上NG ・WordPressはページアクセスのたびに動的にページを生成するため、表示速度に難があり、サイトの作りによっては非常に重くなる ヘッドレスCMSとは？「ユーザがアクセスする画面を持たないCMS」のことです。 今回、WordPressはCMS機能だけ使用して、
WordPress+Next.js+Tailwind CSSでJamstackな爆速ブログを作る | KYONOHALKYO
WordPress+Next.js+Tailwind CSSでJamstackな爆速ブログを作るWordPressの表示速度をカイゼン Jamstack（Javascript+API+markup）なウェブサイトが流行の兆しを見せていますが、これをウェブ制作の現場にフィットするように、既存のリソースを活かしてアレンジしてみたので簡単にまとめます。Next.jsのソースコードなどはまた別の記事でとりあげます。 コスパの良いJamstackを目指す 日本国内でJamstackといえば、一般的にはmicroCMSとNext.js（or Nuxt.js）をVercelにデプロイするのがセオリーとされています。 今回は、microCMSの代わりにWordPress（レンタルサーバで運用）をヘッドレスCMSとして用いて、これを別のVPSでNext.jsを使ってSSR（サーバサイドレンダリング）/SSG
WordPressをNext.jsに移行したらなかなかキツかった話
ドラクエウォークの3周年イベントでメタルキングの剣を運良く引くことができて上機嫌なしゃけごんです。 先月の2022年8月に当サイトはNext.jsへ移行しまだまだ習作が続く中で運用しておりますが、大きなバグも減って来たのでこれまでの移行に対しての知見などをまとめられたらと思い書き記しておきます。 ↑3月下旬から土日祝を全て注ぎ込んだ図です。がんばった！ 当サイトの変遷と技術の移り変わり 当サイト「flap around」は2010年6月からまだ販売開始したばかりのiPhoneを便利に使うブログとして開設しました。 その頃はSeesaaブログか何かで初めてなんとなくHTMLが書けてCSSは書けない程度の知識だったのですが、生きる道すがらWeb制作の勉強をし始めて色々な知識がついて来たので、さくらサーバのレンタルサーバを借りて自分でWordPressサイトに移行したり、その後にWeb制作が仕事
Next.js × WP REST API でブログをリニューアルする時の注意点や学んだこと
実際にリニューアルしたサイトはこちらです。 WordPress製サイトをNext.jsでリニューアルした際に色々苦戦したので、注意点や苦戦した点をまとめました。同じような境遇の方の参考になれば幸いです。 リニューアル前後の環境は以下の通りです。 リニューアル前 フロントエンド、サーバーサイドは当然WordPress サーバーはロリポップ（ドメインはムームードメインで取得） リニューアル後 フロントエンド：Next.js サーバーサイド：WordPress（WordPress REST APIを利用） ホスティングサービス：Netlify ヘッドレスCMSの選定 ヘッドレスCMSとは？ ヘッドレスCMSはコンテンツの管理のみをするCMS（＝Content Management System）のこと。例えばWordPressではコンテンツの作成から表示までを行えますが、ヘッドレスCMSではコン
BODYタグ直後に挿入されている謎のSVGタグを削除したい「wp_global_styles_render_svg_filters」
BODYタグ直後に挿入されている謎のSVGタグを削除したい「wp_global_styles_render_svg_filters」 投稿日2022年05月19日／更新日2022年06月11日 home ＞ WordPress ＞ 解決方法 function.phpで設定します remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' ); 解説 WordPress V5.9以降で、デュオトーン(duotone)を実現するためのタグがデフォルトで出力されるようになっています。具体的には、bodyタグ直後に下記SVGタグが出力されています。 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusabl
WordPressサイトエディター対応のブロックテーマ開発（基本編） – Kiwi blog
WordPressサイトエディター対応のブロックテーマ開発（基本編） WordPressのオリジナルテーマには大きく分けて2種類の作り方があります。PHPファイルを使ってサイトの各画面を実装するクラシックテーマと、サイトエディターを使って自由にサイトの構成要素を編集することができるブロックテーマです。 この記事では、ブロックテーマ開発の基本についてご紹介します。なお、この記事の内容はWordPress 6.1時点の内容をもとにしています。 ブロックテーマとは ブロックテーマとは、WordPress 5.9にて導入された新しいWordPressテーマの形式です。相対的に、画面ごとにPHPファイルを用意する従来の形式はクラシックテーマと呼ばれています。 ブロックと呼ばれる部品を使ってサイト全体が構成されていることが特徴で、テーマを利用するユーザーがブロックをサイトエディターで組み替えることで、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VPS運用のWordPressブログをAWSフル活用したモダン構成にする全過程
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
Next.js WordPress Starter | Next.js WordPress Starter
個人ブログを Next.js + Headless WordPressに 切り替えた話 / shifter-meetup-202011
https://akiblog10.com/headless-wordpress-nextjs/
WordPress×Next.jsで妥協のない完璧なヘッドレスCMSメディアを作る
脱WordPressのための代替ノーコードツール・ヘッドレスCMS
