WordPressのコアブロックのカスタマイズについて2021年のベスト・プラクティスを探ろう その1: ボタンブロック - Photosynthesic blog
こんにちは、みみです。 WordPressのデザインの話をそろそろガチでしたい WordPressのブロックエディタが実装されて早2年になります。カスタムブロックの作り方については良く話題になる気がしますが、ガラッと変わった設計に応じた新しいワークフローやデザイン手法などについてはそんなに話が上がらない気がします。 一通りのカスタムブロックプラグインが出揃った今だと尚更に、それよりもブロックエディタ時代のWordPressのデザイン手法についてみんな考えあぐねているのでは無いかと思うのです。 20日に出た5.8でのWordPressの進化を眺めていて、そろそろ誰かとそういう語りがしたくなってきたので、試しにひとつ書いてみようと思います。Webの4割を占めるWordPressのデザインの話、もっとあってもいいと思うんですよね。 ワークフローとしてウォーターフォール型では全く機能しなくなる、み
ブロックエディターでスターターコンテンツを作る - ブロックエディター私的マニュアル（α）
WordPressを新規インストールしたときに「カスタマイズ」からトップページや投稿記事、メニューなどが用意できる機能があるのは知っていますか？（※ WordPress4.7以上） リリース当初はクラシックエディターでしたが、ブロックエディターが搭載された現在でももちろん作成できます。 今回は、Twenty Twentyのテーマから抜粋して記述をご紹介します。 https://github.com/WordPress/twentytwenty スターターコンテンツのサポートをする スターターコンテンツはadd_theme_supportで機能を追加します。 Twenty Twentyではfunctions.phpの122行目〜130行目にあります。 https://github.com/WordPress/twentytwenty/blob/master/functions.php#L12
[WordPress] Gutenberg で新規投稿時に任意のブロックを入れておく方法
投稿エディタで Gutenberg を使用している場合に、新規投稿時、任意のブロックをデフォルトで配置しておくことができます。 デザイン上、指定のタグやクラス付きのタグを最初に入力してほしい場合に便利な設定です。 hタグの見出しブロックやpタグの段落ブロックを入れておく 見出しや段落ブロックを入れるには以下のようなコードを functions.php へ記入します。 function my_post_template() { $post_obj = get_post_type_object( 'post' ); // get_post_type_object( 'post' ) → の部分で、設定をしたい投稿タイプのスラッグを記入 $post_obj->template = [ // h2タグを入れる [ 'core/heading', [ 'className' => 'myclass'
![[WordPress] Gutenberg で新規投稿時に任意のブロックを入れておく方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/181ffc12dcbbed83caf2b35fc174ecae0cfc8e32/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2020%2F04%2Fcap01.png)
WordPress （Ver5.7）ブロックエディター記事更新マニュアル（PDFダウンロード） | 枚方の女性向け・中小企業・個人事業主ホームページ制作のR-web/ 枚方/寝屋川/交野 大阪・京都・神戸から全国対応
2023年5月3日更新 【最新バージョン6.2】の記事はこちらから 2021年3月20日 バージョン5.7に内容を変更しました。 お客様へ渡すWordPressマニュアルがあったらいいなと思ったので作りました。 私のお客様は、パソコンが苦手という方が多く、「このブロックエディターは使いにくい！元に戻して！」とか、せっかくWordPressに移行したのに「アメブロに戻りたい！」という意見をたくさんいただきました。 そこで基本的なブログの投稿、「新規投稿」のよく使う点だけにフォーカスしてマニュアル化しました。PDFファイルとしてダウンロードできるようにしています。 自分でサイトを作成されている方はもちろん、制作会社様やWEB制作をされているフリーランスの方なども、宜しければお使い下さい。 ダウンロード用PDF（無料版）には当社のリンクが貼ってあります。 説明をとばして、マニュアルのダウンロード
Gutenbergの開発環境をアップデートしたりだとか - Photosynthesic blog
こんにちは、みみです。完全に自分のためのメモ記事ですみません。 Gutenbergの開発版をアップデートするCLIのメモです。 元に戻したい場合 npm run clean:packages && npm run build && npm run env reinstall リモートがアップデートしたから入れ直したい場合 git pull && npm run build && npm run env install &&でやってコケても自己責任で何卒。 ポート番号をイジる まああんまり出番ないと思うけど、複数立ち上げたい奇特な人のために。 WP_ENV_PORT=7777 npx wp-env start 参照: https://github.com/WordPress/gutenberg/tree/master/packages/env
Registration – Block Editor Handbook | Developer.WordPress.org
You can use the functions documented on this page to register a block with JavaScript only on the client, but the recommended method is to register new block types also with PHP on the server using the `block.json` metadata file. See metadata documentation for complete information Learn how to create your first block for the WordPress block editor. From setting up your development environment, too
registerBlockStyleでブロックに独自のスタイルを追加する – Capital P – WordPressメディア
これまでブロックの作成方法などについて触れてきたが、Twenty Twentyなどに見られるように、WordPressコアやプラグインの提供するブロック機能に依存し、あくまでスタイルの拡張に徹底するというのも一つの戦略ではある。 カスタムブロックについて「自分はプログラマーではないのでちょっと……」などと思っている人でも手軽にできる、ブロックスタイルの追加方法を説明する。 スタイルの登録 Gutenbergのデフォルトブロックのうち、たとえば区切り線は「スタイル」という概念がある。 区切り線、要するに hr はスタイルを選ぶことができる。 この実装がどうなっているかというと、スタイルを選ぶごとにCSSのクラスが付与されるという形だ。hrを例にとると、デフォルトで以下の3種類。 上から順に、次の様なクラスが割り当てられている。 クラスなしあるいは is-style-defaultis-sty
WordPressテーマの作り方 2019 私のベストプラクティス
#26 WP ZoomUP でお話した内容です。 「WordPressテーマ、つくれますか？」
Gifu WordPress Meetup #14で「公式テーマTwentyNineteenから読み解くテーマ制作のお作法」という内容で登壇してきました | オレインデザイン
登壇内容概要 アジェンダは以下の通りです。 テーマ開発の環境について今日の話の理解・活用に必要な知識TwentyNineteenの内部ファイルfunctions.phpを読み解くbody_class()post_class()テーマを作るにあたっての理想的な考え方 テーマ開発の環境について テーマを作る際にあると便利な情報を紹介しました。といっても、言い出すとキリがないので初歩的ではありますが、 Show Current Template プラグインテーマユニットテストデータの利用 必要な知識 まぁ、あえて言うのもあれなんですが、WordPressテーマ開発にはこのような知識があると捗ります。 HTMLCSSJavaScriptPHP ただし、全てを完璧にしておく必要など毛頭なく、わからないことをちゃんと調べるというアクションがとても大事です。 ググると色々な情報に遭遇するとは思いますが、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VK Blocks Pro 0.34.0 でアニメーションブロックを追加しました | 株式会社ベクトル
Gutenberg in Numbers
@wordpress/create-block
Parisienne - Divi Blog Child theme I Divi Builder layout I WordPress theme
WordPress Block Styles
Creator of EditorsKit Launches Community Block-Sharing Site
了🌊SWELL | Arkhe開発 on Twitter: "【SWELL無料お試し版リリース！】 ブロックエディターの使いやすさをもっと多くの人に知ってほしいという思いから、 SWELLのブロックエディターをフル機能でご利用いただけるお試し版の配布を開始しました！👏 ※ その他の機能は… https://t.co/dDCs3pa7jx"