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

概要 創業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を直接インライン出力しています。 全ての

[レベル: 中級] 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 を使ってスライドを作成するのは誰にでも当たり前の選択肢とは言えないので、この記事では、その過程を紹

WordPress + Pods Framework でカスタムデータベースをさくっと作ってみる WordPressはカスタムフィールドや投稿タイプを駆使すればわりと自由にフィールドを作成できますが、基本的には記事用のデータベースなのでシンプルなデータベースを作成したい場合ちょっと無駄なところが出てきたりします。 そこで Pods Framework というプラグインを使用して簡単にカスタムデータベース（テーブル）を作成する方法をご紹介します。 投稿日2015年02月12日 更新日2015年02月12日 動作環境 WordPress 4.1 Pods 2.5.1.1 準備 Podsプラグインは公式のプラグインディレクトリからダウンロードできます。 Pods – Custom Content Types and Fields プラグインを有効化すると左メニューに「Pods Admin」という

「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ファイル、データベースのデータベース名、ユーザー名、パスワード情報などを自動生成できるほか、データベースの内容および生成したコンテンツのバックアップ・リ

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

ウェブパフォーマンス、あるいはウェブページの表示速度は、ウェブサイト品質の重要な指標の1つです。今注目されているウェブパフォーマンス改善ですが、そもそも何をすればいいのか、具体例を交えながらその施策を紹介いたします。具体例としては、WordPress を利用したブログの PageSpeed Insigh…

個人用メモです。 !! ======================== !! ※この記事は2019年の記事です。著者はもうWordPressを使用しておりません。この記事で紹介している内容は2019年当時の内容である事を理解した上で、実際に設定する際は最新の情報を確認しながら行ってください。 2019/9/26追記 2020年1月1日より静的IPが有料になる旨Googleから発表がありました。 $0.004/時間=最大約300円/月が有料となります。 それ以外の部分についても無料でなくなり次第記事を更新してまいります。 情報: @mattn 様 2020/3/20追記 まだ請求額が0円だったので「あれ？」って思って調べたら、上記の静的IP有料の変更は1/1から反映されてるものの、キャンペーンで2020/4/1までは割引されている事に気がついたので注釈追記しました。ちなみに割引されなかった

WordPressのmakeブログでは定期的にWordPressのシェアを報告しているが、ついに33.3%を超え、世界のトップ10,000,000サイトの3分の1がWordPressを利用しているという状況になったようだ。 Web制作業界で仕事をしていると、「WordPressはオワコン！」というまとめブログのような感想を見ることもあるだろうが、国内でも国外でもシェアは微増を続けているのがここ2年ほどのトレンドだ。このCapital Pでもたまにシェアを報告しているが、今年で3年目のCapital Pでも4%ぐらいの変遷を見ている。50年後には100%を超えているのではないだろうか。 冗談はさておき、Webの1/3というのはなかなかなインパクトだ。Googleのような企業がパートナーシップを結ぼうとするのもわからないでもない。これからしばらくGoogleのようなビッグネームによる参入が相次

サーバーサイドのレンダリング（SSR）を使用して、数分の1秒以内にページが高速に表示されるWordPressのフロントエンドを構築するテクニックを紹介します。 バックエンドのキャッシュと組み合わせることで、非常に高速になり、しかも安価にWordPressサイトを構築できます。 Zero-latency WordPress Front-end -GitHub 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスを元に翻訳しています。 デモページ サーバーサイドのレンダリング（SSR） バックエンドのサービス 非キャッシュページのアクセス キャッシュページのアクセス キャッシュのパージ 始めてみよう Nginxの設定 バックエンドのJavaScript フロントエンドのJavaScript Cordova 終わりに デモページ サンプルのコードで何ができるのか

先日RC1がリリースされ、いよいよWordPress 5.0のリリースが近づいてきた。といっても、まだリリース日が確定していないのだが……。今回はプラグインやテーマ作者にとって気になる、互換性の保ちかたについてちょっとしたティップスを紹介しよう。 筆者はいくつかのプラグインをリリースしているのだが、そのうちの一つにHamazonというものがある。これはAmazon, DMM, PHG(itunes)のアフィリエイトコードを差し込むものだ。実装はショートコードだが、Shorcakeに対応しているので、ビジュアルエディタでも使うことができる。 ビジュアルエディターにも対応している。Shorcakeを入れていない場合はただのショートコードを挿入。 さて、これをGutenbergに対応させたいのだが、Gutenbergでショートコードをビジュアルとして表示する手段は提供されていないので、ブロックを

WordPress5.0 RC1 が 公開されました。 WordPress5.0は 2018年11月27日 2018年12月6日に リリースされる予定なので いろいろチェックをしています。 その中で WordPress5.0で気がついたところを取り上げていきます。 これから追加・変更はあるかもですので説明や画像キャプチャ等と違う場合がありますのでご容赦ください。 リリースまでのスケジュールは WordPress 5.0 Development Cycle に載っています。 ※WordPress5.0リリースは 2018年11月27日としていましたが いろいろあって 2018年12月6日になる予定だそうです。 【2018/12/6 】リリースされました WordPress 5.0 “Bebo” https://wordpress.org/news/2018/12/bebo/ WordPres

まずは作ったサイトを貼っておきます。 https://wp-nuxt-for-netlify.netlify.com/ いかがですか？現在住んでいるオーストラリアのADSLな爆遅回線でも、爆速です。 WordPress は heteml のレンタルサーバーですよ？ 感動しすぎたので、徒然なるままに〜。 ざっくり構成 WordPress側 リニューアル中の家族ブログ（ https://nishida.lol ） Heteml レンタルサーバー（月額 2000円） Heteml で無料SSL WP REST API でGET APIだけ利用 https://v2.wp-api.org/ フロント側 Nuxt Nuxt.js 1.0.0 nuxt generate で静的ファイル生成 netlify にホスティング https://www.netlify.com/ GitHub 上で nuxt

今年の春頃、iOSのServiceWorker対応で、PWA（Progressive Web Apps)がWeb界隈を賑わせましたね。 私は6月にAndroid Bazaar and Conferenceに参加してまいりました。 春は東大の本郷キャンパスでしたが、秋は川崎で開催されます。現在も参加登録できます! 申込はconnpassから。 PWA for WordPress WordCamp Tokyo 2018や、私が参加した日本Androidの会9月定例会で紹介がありました。サイトをPWA化するためには、manifest.jsonとservice-worker.js、他にアイコン用の画像などが必要となります。 これらを非常に簡単に設定してくれるプラグインです！ (利用には対象のWordPressサイトがhttps化している必要があります) 使ってみました！ プラグインをインストールし