Kansai WordPress Meetup@大阪『 WordCamp Tokyo 2023 をみんなで振り返る+α (https://www.meetup.com/ja-JP/kansai-wordpress-meetup/events/296857054/) 登壇資料です。

最近流行りのAstroフレームワークで、WordPressの静的Headless化がかなりお手軽にできたのでまとめてみました。 開発環境 Astro 2.0 WordPress 6.1.1 Local node 18.12.1 Mac OS 13.2(Ventura) Visual Studio Code(Astroプラグイン入り） Astroとは？ Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。 (公式ドキュメントより) LocalでWordPressを構築 まずLocalを使って、ローカル環境にWordPressを構築します。 サイト名 Astro Blog（お好みで） サイトドメイン astro-blog.local WordPressの設定 WP AdminでWordPressのダッシュボードを立ち上げ、いくつかの

「キャッチアップしておきたいウェブ制作の最前線」というテーマで、Vue.jsなどJavaScriptを駆使したユーザーインターフェイスの開発を主に担当してきた池田泰延氏が、Webのフロント周りの近年の技術的な動向を解説します。前半はフロントエンド技術のトレンドについて。 スピーカー自己紹介、『JavaScript コードレシピ集』を出版 池田泰延 氏（以下、池田）：みなさんよろしくお願いします。ICSの話として、私と鹿野の2名で発表します。HTMLとかCSSとかJavaScriptとか、フロントエンドまわりの最新を説明していきたいと思います。では始めていきましょう！ ます自己紹介します。ICSの池田と言います。株式会社ICSの代表をやっています。これはオフィスの写真でして、南麻布にあるのですが、こんなところで仕事をやっています。今はこの状況下なので、会社にはほとんど誰も行っていませんが、こ

WordPressは4.4からREST APIを導入しており、「WordPressのデータを外部から操作する」ということが本質的には可能になっているが、認証方法がCookieしかデフォルトで提供されていなかった。ところがフィーチャープラグインとして開発されていたApplication Passwordが5.6からコアにマージされるため、あらたな認証方法が追加されることとなった。 Cookie認証以外のREST APIは何があるのか？ まず、WordPressのREST APIが現在サポートしている認証方法であるCookieについて説明しておこう。 そもそもWordPressはCookieをログインに利用している。ブラウザからアクセスする場合はこのCookieを読み取ることで「ログイン済みのユーザーかどうか」を判定している。REST APIではリクエストにnonce（24時間に限り有効な認証

makeブログにE2Eテスト導入のプロポーザルが発表された。これまでWordPressコアはJestによるテストのサンプルコードしか持たなかったが、本格的なE2Eテストの導入に向けて動き出すようだ。採用されるのはGutenbergプロジェクトで生まれたJest+Puppeteerベースの@wordpress/e2e-test-utilsだと思われる。 E2E（エンド・トゥー・エンド）テストとは？ コードのテストには色々あるが、WordPressではPHPUnitによる自動テストが導入されてきた。テストは結構な量に及び、Ajaxでの動作を確認するための結合テストもPHPUnitを拡張する形で大量に書かれている。 このユニットテスト（および結合テスト）は低レベルでのコードの信頼性を高めるのには役立つが、昨今のJSフレームワークゴリゴリの管理画面で発生する問題には対処しづらい。そこで、E2Eテス

[レベル: 中級] この記事では、Wordpress 5.5 に標準実装されたサイトマップ生成機能を無効化する方法を紹介します。 WordPress のコア XML サイトマップ機能 リリースされたばかりの WordPress 5.5（この記事を公開している時点での最新バージョン）は、検索エンジン向けの XML サイトマップを作成する機能をコア機能として標準実装しました。 これまでサイトマップ生成にはプラグインを利用していました。 コア サイトマップは WordPress をインストールしたディレクトリの直下に作られます。 ファイル名は wp-sitemap.xml です。 example.com に WordPress をインストールしていたらサイトマップの場所は example.com/wp-sitemap.xml になります。 アクセスしたサイトマップはこんな感じです（正確には、サイ

[レベル: 中級] ネイティブ Lazy-load を WordPress 5.5 が標準機能として実装します。 <img> タグに loading=”lazy” を自動追加 width 属性と height 属性を追加してある <img> タグには loading="lazy" が記事出力時に自動的に挿入されます。 記事作成者（＝あなた）は何もする必要はありません。 WordPress 側のバックグラウンド処理によりネイティブ Lazy-load が実装され、画像の遅延読み込みが実現します。 もちろん、過去に投稿した記事にも適用されます。 CLS を防ぐために width/height が必要 loading="lazy" を WordPress が追加する画像 (<img> タグ) には width 属性と height 属性が存在していなければなりません。 理由は CLS を防ぐため

概要 創業2期目のスタートアップ株式会社NoSchoolにて、WordPressで開発された自社サービスを、2ヶ月掛けてAWS+Laravel+Nuxt.jsにフルリプレイスした際の技術選定について書きます。 対象読者 Laravelを使ってみたい/使えるライブラリを一通り知りたい AWS構築の全体感を知りたい Nuxt.jsやVuetifyの使用感を知りたい WordPressを脱却したい 技術選定の背景 技術選定と言っても好きな技術を選べばいいというわけではありません。自社が持っている技術力、事業の状況によるところが大きいため、まずは背景としてそのあたりを説明していきます。 先に技術が気になる方はここは読み飛ばして、あとで戻ってきてください ①自社の技術力 CTO @mejileben NoSchoolは創業2期目で2019年6月現在、フルタイムメンバーが僕と社長しかいません。 そして

二ヶ月ほど前に WordPressによる公式Dockerコンテナである wp-env がリリースされたが、現在は日本語ドキュメントの整備も進み、かなり成熟してきたようだ。 wp-envの特徴 さて、wp-envはDockerのnpmラッパーといった趣で、次のような .wp-env.json をリポジトリに用意しておくことで、開発環境がまるっと用意できる。 { "core": null, "plugins": [ "." ] } Dockerを利用したWordPress開発環境はいくつかあるが、利点は下記の通り。 公式でサポートされている。たとえば Docker がリリースしているWordPressイメージなどはファイルパーミッションなどがやや微妙だった。DockerとNode（v12以上）がインストールされていれば、環境を再現できる。追加ソフトウェアのインストールは不要（というより、npm

WordPressで読み込んでるCSSはテーマだけではなくブロックエディタ用や使用しているプラグイン用のCSS等、何ファイルか外部CSSとして読み込んでいます。 プラグインが多くなった等 で読み込む外部CSSがあまり多くなると、それだけページの表示が遅れる場合があります。その場合は外部CSSをインライン(ヘッダ内)に出力すると改善する場合があります。 ※最近では 既にCSSをインライン(ヘッダ内)に出力するようにしているテーマもいくつか見うけられます。 ここでは外部CSSを全てminifyしてインライン(ヘッダ内)に出力するTipsを紹介します。 【公開ページ HTMLソース　インラインTips利用前】 ※結構な数のCSSファイルを読んでます。 【公開ページ HTMLソース　インラインTips利用後】 ※CSSファイルの読み込みタグが無くなり、CSSを直接インライン出力しています。 全ての

皆さんご機嫌いかがでしょうか。yamashitaです。 本日はWordPressのお節介機能を止める方法を紹介します。 URL自動補完リダイレクトについて 実際の動作例 以下のような親子構成の固定ページがあるとします。（いい例が考えつかずすみません） /jp /en /jp/aaaa /en/bbbb この時/en/bbbbにアクセスしようと思い、間違えて/jp/bbbbとURLを入力すると・・・なんと/en/bbbbにアクセスできるとても便利な機能なんです。 他にも/jp/jpと入力した場合、ビックリなことに階層を飛び越えて/jpにアクセスさせてくれます。とても便利と見せかけて存在しないページへのアクセスを勝手に存在してるページに飛ばしちゃいます。 このような例のほかにも、/jp/aaと入力すると/jp/aaaaにアクセスします。 どうやら前方一致でリダイレクトしてるようでパスの最後の階

WordPress5.4 RC1 が 公開されました。 WordPress5.4は 2020年3月31日に リリースされる予定なので いろいろチェックをしています。 その中で WordPress5.4で気がついたところを取り上げていきます。 これから追加・変更があるかもですので、説明や画像等がリリース時と違う場合もありますが随時チェックしていく予定です。 リリースまでのスケジュールは WordPress 5.4 Development Cycle に載っています。 WordPress 5.4 Beta 1 https://wordpress.org/news/2020/02/wordpress-5-4-beta-1/ WordPress 5.4 Beta 2 https://wordpress.org/news/2020/02/wordpress-5-4-beta-2/ WordPress

[レベル: 中級] WordPress は、ネイティブ Lazy-load を標準機能として実装することを計画しています。 JavaScript のライブラリやプラグインを使わずとも、Lazy-load の仕組みが WordPress 本体に組み込まれます。 またサイトマップ生成機能を、WordPress の標準機能として実装することも計画されていました。 こちらは準備が進んでおり、まずはプラグインがリリースされました。 プラグインとして検証した後、WordPress 本体にサイトマップ生成機能が組み込まれます。 ネイティブ Lazy-load をデフォルトでサポート デフォルト機能としての Lazy-load には loading 属性を利用します。 loading 属性は、Google が Chrome で最初にした HTML 属性です この属性を、画像 (img タグ）と ifram

以下は、Ella van Durpe が書いた WordPress.org 公式ブログの記事、「State of the Word: the story of the slides」を @mimitips、@nao、@nukaga、@atachibana で訳したものです。 誤字脱字誤訳などありましたらフォーラムまでお知らせください。 WordCamp US 2019 で行われた マット・マレンウェッグ (Matt Mullenweg) 氏による State of the Word (訳注: マット・マレンウェッグが毎年行う基調講演) の中で、プレゼンテーションに使用したスライドが、Slides プラグインを使用した Gutenberg で作られていることが明かされました。WordPress を使ってスライドを作成するのは誰にでも当たり前の選択肢とは言えないので、この記事では、その過程を紹

今回は独自のテーブルを作成するのでコンテンツタイプは「拡張コンテンツタイプ」を選択します。 「Singular Label」に入力した文字列を元にテーブルが作成されます。 「NEXT STEP」ボタンを押すとテーブルが作成され、各項目を設定する画面が表示されます。 バリデーションなどの設定もここで行います。 とりあえず下記のように作成しました。 デフォルトでは管理画面の入力が英語の部分があるので必要なら「Labels」タブで日本語の設定をします。 終わったら「Save Pod」で設定の保存をします。 データベースを確認すると「wp_pods_store」というテーブル名でちゃんとに作られてますね。 すごい！ あとは左メニューに設定したラベル名で項目が追加されているので、適当に作成しておきましょう。 テンプレートの作成 データベースを作成しただけでは意味ないので、テンプレートに入力したデータ

「KUSANAGI Runs on Docker」は、超高速CMS実行環境「KUSANAGI」をDocker上で利用することで、WordPressなどのCMSを高速・セキュアに動作させることができる。 WordPressだけでなく、concrete5、Drupal 7/8、LAMP、LEMP環境としても利用可能で、動作環境としてはnginx、Apache、php7、MariaDBに対応している。推奨OSは、CentOS7、Ubuntu18.04、Windows 10（WSL＋Docker Desktop for Windows）、macOS（Docker Desktop for Mac）。 なお、使用するdocker-compose.ymlファイル、データベースのデータベース名、ユーザー名、パスワード情報などを自動生成できるほか、データベースの内容および生成したコンテンツのバックアップ・リ

こんにちは、ishidaです。最近、猫カフェにハマってます。 Dockerを先日インストールしたので、WordPress環境を作ってみたいと思います。 開発環境 ・macOS Mojave 10.14.4 ・Docker version 18.09.2 Docker Composeとは 公式サイトには、 Compose とは、複数のコンテナを使う Docker アプリケーションを、定義・実行するツールです。Compose はアプリケーションのサービスの設定に、Compose ファイルを使います。そして、コマンドを１つ実行するだけで、設定した全てのサービスを作成・起動します。 と書いてあります。 コマンド１つだけで、複数のサービスを作成・起動が出来るようになります。 超便利ですね。 Docker のインストール まずはDocker Desktopをインストールしていきましょう。 公式サイトか

さくらインターネット研究所さんの「MariaDB Galera Clusterを試す」という記事を読んで居ても立ってもいられなくなり、さっそく AWS で構築してみました。 上記の記事によれば 簡単にまとめると次のようになります。 Galera Replicationが複数のRDBMをレプリケーションするwsrep APIを提供し、同期をとります 完全同期型であるため、すべてのノードがアクティブかつマスターとなります クラスターノードのどれに対してもリード／ライトが可能です ノードの追加／削除は自動で行えます クライアント接続は通常のMySQLとなんら変わりなく使えます via. MariaDB Galera Clusterを試す (1) « さくらインターネット研究所 おー！スレーブ/マスター形式のレプリケーションよりも、断然使いやすそうやんか！ ってわけで AWS の ELB 配下に複

これだけあればpathやURLを指定する時に困ることはありません WordPressには便利なタグがたくさん用意されています。 たくさん用意されすぎていて 「小テーマへのパスは何で指定するんだっけ？」 「この関数は最後にスラッシュ付いたっけ？」 と、毎回検索して調べていたので、この機会にまとめを作りました。

WordPress関連の市場としてもっとも大きいのがホスティング市場であることは何度かお伝えしているが、その中でもトッププレイヤーであるWP Engineが大型の買収を行なった。対象となった企業はこれまた同じくWordPressマネージドホスティング企業であるFlywheel。日本ではCapital Pでも紹介したローカル開発環境管理ツールLocal by Flywheelの開発元として有名だろうが、元々はホスティング企業である。 今回の買収額は「WordPress産業における最大の買収」という点以外は不明だが、おそらく以前お伝えした2億5,000万ドルの資金調達も大きく絡んでいる。今後も買収による事業拡大は続いていくだろう。 WP Engineは自らのサービスを単なるホスティング業者ではなく、デジタル・エクスペリエンス・プラットフォームと位置付けている。Capital Pがこれまで報じて