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ファイルを用意する従来の形式はクラシックテーマと呼ばれています。 ブロックと呼ばれる部品を使ってサイト全体が構成されていることが特徴で、テーマを利用するユーザーがブロックをサイトエディターで組み替えることで、
【WordPress5.9 / 6.0版】theme.json 全解説 - Qiita
WordPress6.1以降の各メジャーバージョンにおける変更点については、以下記事をご参照ください。 【WordPress6.1】theme.json の変更点 【WordPress6.2】theme.json の変更点 【WordPress6.3】theme.json の変更点 【WordPress6.4】theme.json の変更点 【WordPress6.5】theme.json の変更点 変更履歴 2023.03.20: title プロパティに関する説明を追加しました。(解説) はじめに WordPress5.8で、新しいツールである theme.json が導入されました。 これにより、テーマやブロックがサポートする機能・レイアウト・スタイルなどの多くを、このJSONファイル一つで一元的にコントロール出来るようになりました。 この theme.json は、WordPres
WordPress + Laravel で「ヘッドレス CMS」をつくる
さてさて、最近特にTwitterから情報を得ていると最新情報が豊富なので「時代に取り残されにくくなる」ような気がしています。 しかも、優秀な方々のツイートはお金を払ってでもほしいと思えるようなものがあったりもします。（それにしても、ああいう超優秀な方々はホント何者なんでしょうか…😂） そして、そんな情報収集の中で気になったのが、 ヘッドレス CMS 「ヘッドレス CMS」とは、簡単にいうと「コンテンツ部分だけ管理する別サイト」で、例えば「ユーザーへのお知らせ部分だけ管理できるサイト」をイメージすると分かりやすいでしょうか。 そして、そんな「ヘッドレス CMS」はすでに日本版サービスが出てるぐらい浸透してきているのですが、そのときあることがひらめきました。 「これ、WordPressで作れるんじゃない？？」 と。 そこで❗ 今回は、WordPress + Laravel でシンプルな「ヘッ
React.jsを使ってヘッドレスWordPressサイトを構築する方法
React.jsを使ってヘッドレスWordPressサイトを構築する方法 WordPressは、最も人気のあるコンテンツ管理システム（CMS）の1つで、インターネット全体の41%に相当する8億1千万人が利用しています。シンプルでユーザーフレンドリー、多様なカスタマイズオプション、プラグインやその他のリソースの強力なエコシステムを誇り、ウェブサイトを素早く構築したい人にとって優れた選択肢となっています。 WordPressを最大限に活用する方法のひとつが、ヘッドレス化です。 ヘッドレスCMSは、ヘッドレスシステムとも呼ばれ、コンテンツの管理に使用されるバックエンドCMSの一種です。ヘッドレスCMSのAPIを呼び出すだけで、あらゆるシステムやウェブサイトにコンテンツを統合することができます。 ただし、この手法を選択する際には、フロントエンドを別途管理する必要があります。そこで登場するのがAPI
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
僕が考える 「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
クエリを減らしてWordPressを高速化するテクニック集