[【大阪】Kansai WordPress Meetup@大阪『ブロックエディターについてもっと知ろう！』](https://www.meetup.com/ja-JP/kansai-wordpress-meetup/events/295907589/) 登壇資料です。

WordPressのオウンドメディアや自社サイトをアプリ化します。ネイティブアプリ開発で機能追加やデザイン変更が自由自在にカスタマイズできます。 株式会社アプキー（愛知県名古屋市、代表取締役：中田雄二 以下、当社）は、WordPressのオウンドメディアや自社サイトをアプリ化する開発サービスを開始しました。 弊社のWordPressのアプリ化サービスは、WordPressのCMSからAPI情報を取得し、アプリを開発するサービスです。 本アプリ開発サービスは、ノーコードで簡易的につくるアプリとは異なり、ネイティブアプリ開発となりますので、どのようなアプリ機能も追加や設計の変更もできます。 WordPressアプリ化サービスのご案内ページ https://wordpress.appkeyshop.com/ ■   開発サービスの特徴 WordPressのアプリ化サービス WordPressのC

以下は、Jeff Ong が書いた WordPress.org 公式ブログの記事「Configuring Theme Design with theme.json」を訳したものです。 誤字脱字誤訳などありましたらフォーラムまでお知らせください。 WordPress 5.8以降、新しいツールである “theme.json” をテーマ開発に利用できるようになりました。初めて聞いたかもしれませんし、すでにこれを試用し、テーマを開発しているかもしれません。いずれにせよ、今は WordPress テーマにとってエキサイティングな時期ですので、この記事を読んでいただけて嬉しく思います。 当記事では、この新しいフレームワークを簡単に紹介し、実用的なヒントと例をいくつか共有することで、何ができるのかを説明していきます。 theme.json とは 技術的に言えば、theme.json はテーマのディレクト

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

WordPressでカレンダーを表示するプラグインはたくさんありますが、なかなか希望する仕様のものがないことってありませんか？そのような場合は、カレンダーを自作してしまいましょう。 公開した後にありがたい次のようなコメントをいただきました。 WordPressで date関数を使うと時差分ずれるので、date_i18n関数を使った方がよいです。 エスケープ処理はしっかりと 毎回APIのリクエストするのは遅延に繋がります。Transients APIの利用を検討ください。 file_get_contents で祝日を取得していますが、WordPress であれば、wp_remote_getを使った方が、タイムアウトなどの設定もできてお得です。 投稿の関連付けの部分で、一カ月の日数分get_posts によるクエリーが発生してしまっています。カレンダーを表示するだけなら、月間のイベントを一気に

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

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

こんにちは！3児のパパエンジニアの笹垣です。 以前こちらでWordPressのGutenbergブロック開発についてご紹介しましたが、その後実案件でカスタムブロックを使う機会があり、ブロック開発に加え、カスタム設定機能も追加したので合わせてご紹介します。 先日リリースしたARCHETYP Staffingのメディアサイト「ARCHETYP Staffing Magazine」では、インハウス・フリーランス・制作会社で働くクリエイターやエンジニア、企業のクリエイティブに対する思いなどをインタビューや対談形式で発信していますが、その記事で利用する会話モジュールが欲しいという要望から開発に至りました。 はじめに まずはじめに会話モジュールのカスタムブロックを作成します。 ※カスタムブロックの開発を行う上で必要な知識や環境についてはこちらを御覧ください。 会話ブロックの追加 前回の定義リスト（dl

Wordpress5.0リリースから標準エディターとなったGutenergのカスタマイズが結構充実しているので自分が主に使っているもの、使う予定のものをメモ。 随時追加していく予定です。 開発環境 Wordpress 5.0 create-guten-block 1.13.0 npm 6.4.1 node 10.13.0 ブロックのカスタマイズをする場合、create-guten-blockを使うとほとんど設定を行う必要なく開発ができます。 実装方法などこちらでまとめてます。 ブロックのカスタマイズ 独自のブロック要素の追加や既存のブロックのカスタマイズについて。 ブロックの追加 registerBlockType関数で独自のブロック要素を登録します。 registerBlockTypeの第一引数にブロック要素の名前を入れるのですが、「名前空間/ブロック名」という形式で指定する必要がありま

以前お知らせした通り、現在のWordPressのエディタは今後のロードマップにおける最重要事項として挙げられている。が、筆者の予想では、WordPressの管理画面はそれなりに作り込まれているため、リプレースに相当な時間がかかるはずだ。 さて、まだ見ぬ管理画面のことはさておき、現状の投稿画面のUXをもう少しわかりやすいものにしてくれるプラグインを紹介する。その名もShortcakeだ。 https://ja.wordpress.org/plugins/shortcode-ui/ Shortcakeはショートコードの出力結果をビジュアルエディタに表示してくれるプラグインである。日本では「知る人ぞ知る」といったポジションにあるのだが、きちんと作り込めば次のような見栄えを作ることが可能だ。 テーマでは次のような会話ブロックが表示されているが…… 投稿画面でもまったく同じものが表示される このプラ

本当に簡易的なものであれば、管理画面でいくつかの項目を選択・入力するだけで簡単にGutenbergブロックを作成できるプラグイン「Block Lab」を紹介します。 正直デフォルトのブロックで可能なことができなかったりと物足りないと感じた部分も多かったんですが、せっかく試したのでその備忘録も兼ねて。 紹介している内容やキャプチャなどは、WordPress Ver 5.0.3とBlock Lab Ver 1.1.1を使用した際のものになります。 インストール・有効化 管理画面のプラグインから「Block Lab」を検索してインストール、もしくは「Block Lab」からファイルをダウンロードして環境にアップロード。 プラグインを有効化するとメニュー最下部に「Block Lab」という項目が追加されるので、そこでブロックの作成・編集・削除などを行うことができます。 ブロックの作成と設定 ブロッ

再利用可能ブロックとは wordpressが5.0になり、Gutenbergがリリースされてしばらく、 すこしずつ利用の仕方もわかるようになり、バグも改善してきたので、そろそろ本番でも利用してみようかなと思っています。 ブロック単位で記述をしていくGutenbergで最も便利に使えるだろう！と思っているのが、 この再利用可能ブロックです。 再利用可能ブロックは、同じ内容を何度も利用（投稿）する場合に便利です。 一度登録しておけば、何度でも同じ内容を記述せずに投稿することができます。 しかも複数ブロックを組み合わせておくこともできます。 定型文としても、レイアウトの雛形としても利用できる便利なツールです。 再利用可能ブロックを登録 再利用可能ブロックを登録するには、作成したブロックを変換する方法と、一覧画面から新規追加をする方法があります。 再利用可能ブロックに変換する 作成したブロックを再

WordPress 5.0から導入されたブロックエディター(Gutenberg)のカスタマイズ方法や、関連するオプション、新しく導入された設定について見ていきます。オフィシャルの テーマサポート の内容をベースに、独自の情報を追加しています。 更新履歴 2021/06/11 - ブロックフォントサイズの shortName が無くなったので削除。ブロックパターンの削除、カスタム単位、カスタム行間について追加。 2021/01/10 - グラデーション設定を追加。 2020/06/19 - 投稿タイプ別に使えるブロックを制限する方法を追加。 2020/05/24 - ブロックスタイルの削除について追加。 2020/04/22 - 後方互換性についての注意を追加。ダークモードの記載追加。 2020/02/20 - Gutenberg 7.5 でインラインの文字色編集が追加されたので記載。 20

本稿ではいよいよGutenbergのブロックタイプについて学んでいこう。Gutenbergではカスタムブロックタイプを登録することができる。このブロックタイプにはいくつか種類があるのだが、まずは一番簡単な「見栄えに関する設定項目だけが存在するブロック」を作ってみよう。 なお、以前の記事ではじめてのカスタムブロックというものがあるのだが、重複するところが多いことをお断りしておく。とはいえ、半年以上前の記事であることと、JSXを採用している点を鑑みると、本稿から学ぶことも多いだろう。 成果物 成果物としては、次のようなアラートボックスを作成することを目指す。アラートボックスには次の2つの要素が存在する。 スタイル。success, info, warning, dangerの4種類がある。 メッセージ。これはリッチテキスト（HTML）として編集可能で、strongタグとaタグなどを挿入すること

WordPressのGutenbergで画像を挿入できるカスタムブロックを作成する Gutenbergでブロックにメディアアップローダで画像を挿入できるようにしてみます 投稿日2018年09月28日 更新日2018年09月28日 Gutenberg 3.9 を使用します。 Gutenbergブロックの開発環境の構築 開発環境はCreate Guten Blockで構築されたものを使用します。 よかったらこちらの記事もご覧ください。 Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する 準備 src/block.jsにこれから作成するファイルをインポートします。 block-imageというディレクトリ名にしてこの中に作成します。 src/block.js import './block-image/block.js' 新たに作成したブロックを追加して

WordPressの新エディターGutenbergでカスタムブロックを作成する[初級編] WordPress5.0でデフォルトになる予定の新エディター「Gutenberg」。 ブロックを組み合わせてページを作成できることが特徴となっていますが、このブロックをオリジナルで作成してみたいと思います。 投稿日2018年08月29日 更新日2018年08月29日 Gutenbergブロックの開発環境の構築 Create Guten Blockという開発ツールキットを使用するとモダンな開発環境が簡単に構築できます。 よかったらこちらの記事もご覧ください。 Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する 一番シンプルなカスタムブロック Create Guten Blockで作成したプラグインのディレクトリは下記のようになっています。 ├── package