Adding options and controls to an existing Gutenberg block - Marie Comet
Lire la version en français This article explains how to add options and controls to existing blocks in the WordPress editor, Gutenberg, and save them in the attributes. The procedure is different from adding controls when creating custom blocks, as we will only use filters to hook to existing blocks. The filters available in the editor work like PHP filters (add_filter, apply_filters). It’s best
WordPress Local Development Without the Uploads Directory
When doing local development on a WordPress site, you typically need three things: Working copy of the codebase. Recent-ish copy of the database. The entire contents of wp-content/uploads. That third one can be problematic. Some WordPress sites have tens or hundreds of thousands of uploads. Let’s say a site posts once a day for a decade, and each post has five images and their theme defines 12 ima
2022年はWordPressの新しいウィジェットに対応して幸せになろうよ | ブログ | ウェビングスタジオ
予想される問題 とはいえ、現実を見ると5.8はかなりヤバいアップデートです。これまでWordPress案件を何度かこなしてきた製作者が、5.8をインストールしてサイトを作った際に想定される問題を考えてみました。 ウィジェットのマークアップの変化 ウィジェットの生成時に出力するHTMLを、register sidebar関数でカスタマイズしていないと、マークアップが変更されるようです。 具体的には見出しとアプリがli要素で区切られるようになります。WordPressサイトを何個も制作して、CSSなどをWordPressが出力するHTMLに合わせてフレームワーク化している人ほど、来年以降の新規案件で調整が増えそうです。 WordPress 5.8のウィジェット使ってみたら出力HTMLがこんなことになるんだなー。クライアントが操作したらどうなっちゃうんだろなー。機能制限するしかないかなー。。。
Lazy BlocksとMy Snow Monkeyでカスタムブロックを作る方法 | オレインデザイン
Snow Monkey をベースにウェブサイト制作を進めていると、お仕事の進め方やお客様のご要望などによっては、カスタムブロックを用意した方が総合的に便利に使ってもらえるかもしれないという状況もあるかもしれません。 そう言った場合に、スクラッチ（ゼロから）でカスタムブロックを作っても良いのですが、技術的に障壁があったり、どこまでの情報を常にフォローアップしていられるかメンテナンス的な側面からも不安に感じることもあるかと思います。 そんな時に、スクラッチよりかは比較的手軽にカスタムブロックを用意できる便利なプラグインがあります。 Lazy BlocksGenesis Custom Blocks 上記以外にもまだまだあるとは思いますが、こちらの記事では Lazy Blocks を使って My Snow Monkey（プラグイン）からカスタマイズしていき、カスタムブロックを用意する方法をご紹介し
10up Engineering Best Practices
Performance #performance Writing performant code is absolutely critical, especially at the enterprise level. There are a number of strategies and best practices we must employ to ensure our code is optimized for high-traffic situations. Efficient Database Queries When querying the database in WordPress, you should generally use a WP_Query object. WP_Query objects take a number of useful arguments
Learn about full site editing and themes
Full site editing will change how everyone uses themes -and how we build them What is full site editing? Site editing is a set of new WordPress features that help us build and edit all parts of our website using blocks: Site Editor, global styles, block themes, patterns, and theme.json. Fullsiteediting.com is an educational resource for learning about the features. Site Editor Use the Site Editor
【WV.6】WordPressテーマ作成における画像読み込みとサイズ最適化 – Capital P – WordPressメディア
Core Web Vital の連載6回目では、画像周りの処理を上げる。これはテーマに関わることであり、多くの場合テーマ本体の修正を必要とするだろう。今後テーマを新たに開発するケースがある場合は参考にして欲しい。LCPおよびCLSに関わる改善点だ。 Page Speed Insightsでの指摘 基本的には次の対処を行う必要がある。 widthとheightの指定ファーストビューに入らない画像の遅延読み込みpicureタグまたはsrcsetによる最適化された画像の出力 それでは、一つ一つ紹介していこう。 widthとheightの指定 画像にはwidthおよびheightを指定する必要がある。なぜかというと、その指定があれば、ブラウザは実際の画像を読み込む前にその画像のサイズがわかるからである。CSSで画像の表示サイズを変更するとしても、画像のサイズは必ず記載するようにしよう。Core W
【WV.5】WordPressにおけるJSとCSSの遅延読み込み – Capital P – WordPressメディア
Core Web Vitalに関する連載の第5回はCSSとJSの遅延読み込みについて説明する。この2点は主に「レンダリングを妨げるリソースの除外」という項目でPage Speed Insightsに表示される。 WordPressプラグインのおすすめまでしてくれる。 プラグインで対応する方法もあるのでプラグインを導入して済めばそれでよし。本稿では原理の説明とコードによる解決を紹介する。テーマ本体に手を入れなくてもよいソリューションなので、ぜひ取り組んでほしい。筆者の開発したテーマSide Businessでもほぼ似たようなことをやっている。 CSSの遅延読み込み CSSは通常headタグ内に挿入される。ブラウザは <link> タグを見つけるたびにCSSをダウンロードし、その内容を解析してスタイルコンテキストツリーを構築する。この間はHTMLのパース（DOMモデル構築）やJavaScrip
【WV.4】動的WordPressサイトでどこまでTTFBを下げられるか – Capital P – WordPressメディア
オブジェクトキャッシュのデータストアと対応環境 まず、ファイルシステムへの保存だが、これはあまりお勧めしない。うっかりキャッシュデータを公開可能な領域においてしまうと、情報漏洩が懸念されるからだ。共有レンタルサーバーだとPHP拡張のAPCuぐらいしか選択肢がない（e.g. さくらのレンタルサーバー）ので、その場合は WP LCache を使おう。ただし、あまり熱心にはメンテされていない様子だが……。 VPSあるいはクラウドホスティングの場合は、MemcachedあるいはRedisを利用できる。AWSならElasticacheのようなサービスを使うとサーバーのお守りが楽だ。また、キャッシュサーバーを用意することにより、複数台構成のWordPressでもデータの一貫性が保たれる——というより、複数台構成の場合は必ずキャッシュサーバーを用意しなければならない。 複数台構成の場合、キャッシュサーバ
Composerを使ってWordPress導入作業を一瞬で終わらせる | MONSTER DIVE
ゲームと猫と多肉植物を愛するMioです。 最近は猫を見ているだけで飽きないのですっかりPS4を起動しなくなってしまいました。 代わりに多肉植物を育てるという時間のかからない且つ一見オーガニックな趣味を見つけたのですが、実のところは交配してオリジナル品種を作出するというマッドサイエンティストな野望を抱いています。 さて、MONSTER DIVEではWordPress関係のお仕事を定期的にいただくのですが、新規構築する際に毎回同じ作業をするのはダサいな！という気持ちになった秋の夜長。 今回はComposerを使ってWordPressの導入作業を出来る限り自動化して楽するための小ネタです。 Composerとは PHPのパッケージ管理システムです。 MacにおけるHomebrewだったり、あるいはNode.jsにおけるnpmと同じ位置づけです。 例えばAというライブラリを導入したいと思った時、A
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Telex — AI-Assisted Authoring Environment for WordPress Blocks
Fix: 502 Bad Gateway with Valet | Tom McFarlin
Automated testing and Continuous Integration in WordPress development
Introduction to WordPress acceptance testing | The Man in the Arena
The block in the Editor – Block Editor Handbook | Developer.WordPress.org
SpinupWP
【WordPress】Gutenberg Componentsを使ってプラグインの設定画面を作る - Qiita
Automating WordPress Development with Make
[WordPress][MySQL] クエリパフォーマンスが落ちてきたときに設定すると良いインデックス - Qiita![[WordPress][MySQL] クエリパフォーマンスが落ちてきたときに設定すると良いインデックス - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a6211cca502698d9a17c4c6690bc8523711d8747/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCV29yZFByZXNzJTVEJTVCTXlTUUwlNUQlMjAlRTMlODIlQUYlRTMlODIlQTglRTMlODMlQUElRTMlODMlOTElRTMlODMlOTUlRTMlODIlQTklRTMlODMlQkMlRTMlODMlOUUlRTMlODMlQjMlRTMlODIlQjklRTMlODElOEMlRTglOTAlQkQlRTMlODElQTElRTMlODElQTYlRTMlODElOEQlRTMlODElOUYlRTMlODElQTglRTMlODElOEQlRTMlODElQUIlRTglQTglQUQlRTUlQUUlOUElRTMlODElOTklRTMlODIlOEIlRTMlODElQTglRTglODklQUYlRTMlODElODQlRTMlODIlQTQlRTMlODMlQjMlRTMlODMlODclRTMlODMlODMlRTMlODIlQUYlRTMlODIlQjkmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTE5NDE4ZDJmZjM0MDU0OGYxNDk3OTY5MzFhNjU2ZGNk%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB3b2thbW90byZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NjhjYjAyZDViNzA3YjVmZWI1YWNlNzZjNjUzNTVlZjE%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44OH44K444K_44Or44Kt44Ol44O844OWIChEaWdpdGFsQ3ViZSBDby4gTHRkLiAp%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D64ab503b660bf5747299bd9ae5de17e6)
WP-CFM
