無料図書館「Project Gutenberg」の蔵書をAIがオーディオブックに ～Microsoftが協力／英語のリスニング教材にいかが？【やじうまの杜】
WordPressのバージョンが５になって以降、正式なエディタがブロックエディタになりました。 バージョン4.9の時にプラグインとしてGutenbergが紹介されていたのですが、どうも今後このブロックエディタが主流になるような感じですね。 2021年末にClassic Editor（クラシックエディタ）のサポートが終了することが決まっておりそのまま使い続けることは困難かもしれません。 ブロックエディタとは？ ブロックエディタとは、WordPress バージョン5.0 以降で標準搭載されているエディタ（記事を編集する画面）です。 「Gutenberg（グーテンベルク）」という名前は、活版印刷技術の発明者といわれるJohannes Gutenberg（ヨハネス・グーテンベルク）にあやかって付けられています。 WordPress エディターはブロックを使用してコンテンツの作成方法を変換します。
『グーテンベルク時代のWordPressノート テーマの作り方 2（ランディングページ＆ワンカラムサイト編）』ではJavaScriptファイルを用意してブロックスタイルを追加する方法を紹介しましたが、最新のGutenberg（バージョン6.2）ではPHPだけでも簡単に追加できるようになりました。 たとえば、functions.phpに次のように register_block_style() の設定を追加すると、見出しブロックに「デザイン01」と「デザイン02」の２つのブロックスタイルが追加され、見出しのデザインを切り替えることができるようになります。 register_block_style( 'core/heading', array( 'name' => 'design01', 'label' => 'デザイン01', 'inline_style' => '.is-style-desi
The Project Gutenberg Open Audiobook Collection
The Project Gutenberg Open Audiobook Collection Thousands of free and open audiobooks powered by Project Gutenberg, Microsoft, and MIT Project Gutenberg, Microsoft, and MIT have worked together to create thousands of free and open audiobooks using new neural text-to-speech technology and Project Gutenberg's large open-access collection of e-books. This project aims to make literature more accessib
WordPress JSX を使った Gutenberg ブロックの作り方 WordPress のブロックエディタ Gutenberg で JSX を使って独自のブロックを作成する方法について。 JSX を使用するための環境構築は @wordpress/scripts（wp-scripts）を使っています。基本的なブロックの作成方法、JSX の基本的な使い方、WordPress のコンポーネントの使い方、webpack.config.js を使った環境のカスタマイズ（複数のエントリーポイントの設定方法）などについての覚書です。 以下は(旧)ブロックの作成 チュートリアル（削除予定）などの古い情報を参考にしているため部分的に古い情報になっています。 以下はすでに Node.js がインストールされていて、WordPress のローカル環境が設定済みであることを前提にしています。また、コマンド
我々が快適にブログ更新が出来るツールの中に「Classic Editor」があります。以前から、このプラグインは無くなるのでは？との声が聞えていましたが、いよいよサポート終了の予定が立ったみたいです。 サポート終了とのことなので、完全に使えなくなるわけではなさそうですが、WordPressが推奨している「Gutenberg」が主流になります。 そこで今回は、Classic EditorからGutenbergに切り替える方法を１つの記事にまとめてみます。あなたがこの記事を読むことで、迷わずGutenbergに切り替えることができます。是非、最後まで読んでくださいね。 Gutenbergとは これまで使っていたClassic Editor は、htmlやcssなどの専門知識が必要なEditorでした。このスタイルが長く安定して使えていたのですが、Editorの方式を「ブロック」にすることで、従
GitHub - Gutenberg-Labo/GL-NovantiquaMinamoto: GL-ノバンチカ源 / Japanese font for manga dialogue.
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
WordPress Gutenberg ブロックの作成 ブロックエディタ Gutenberg で独自のブロックタイプを作成（自作）するための基本的なことについての覚書です。 以下は(旧)ブロックの作成 チュートリアル（削除予定）などの古い情報を参考にしているため部分的に古い情報になっています。 2024年時点での情報でのカスタムブロックの作り方は以下を御覧ください。 WordPress Highlight.js カスタムブロックの作成 WordPress Highlight.js カスタムブロック サンプル 環境構築などはせずに、独自のブロック（カスタムブロック）を作成する方法を掲載しています。内容的には主に日本語の公式リファレンスの「ブロック」を元にしています。 以下で作成するブロックは単純なもので、JSX も使用しないので環境構築（Babel の設定など）の必要はありませんが、ローカル
Free Gutenberg and WooCommerce WordPress Theme - Blocksy
Lightning Fast Feels fast and numbers confirm that, it is ranked at the top in most speed testing tools. Gutenberg Ready Built from scratch to be 100% compatible with the Gutenberg editor and blocks. Code Splitting Load JavaScript behavior when you really need it using webpack’s support for dynamic imports. eCommerce Ready Easily build and customize your online store in minutes and start selling l
まだ「ブロックエディターが使いにくい」とか言ってる人は、まずは黙ってこの記事を読んでみてください。 「バージョンアップデートしたらバグった！」と言ってる人をちょくちょく見かけますが、それはテーマかプラグインが原因の可能性が大きいです。WordPressが悪いみたいな言い方はやめて、テーマ・プラグイン開発者にどうバグったのか報告してあげましょう。 デフォルトスタイルが選べるようになった 頻繁に使うブロックスタイルをあらかじめセットできるようになりました。 例えば、『SWELL』では画像ブロックに影をつけたり線をつけたりできるスタイルが選択できるのですが、「影あり」のスタイルをデフォルトスタイルに登録することで、次回以降、初めから影が付いた状態で画像ブロックが配置されるようになります。 デフォルトスタイルをセットしている様子 ブロックの移動にアニメーションがついた ブロックを移動させる時にアニ
完成したコード「実現したいこと」を踏まえた上で完成したコードがこちらです。 /*! * Copyright (c) 2020 kusamura * https://web.monogusa-note.com/ * Released under the GPL license. * see http://www.gnu.org/licenses/gpl-2.0.html * * 参考: https://www.webopixel.net/wordpress/1499.html */ //コンポーネントの読み込み const { Fragment } = wp.element; const { addFilter } = wp.hooks; const { PanelBody, SelectControl } = wp.components; const { InspectorControls
こんにちは、T部長です！ WordPress（ワードプレス）のエディタはバージョンが上がるたびに進化し続け、2018年にはブロックエディタ（Gutenberg）と呼ばれるエディタに生まれ変わりました。 今回の記事では、ブロックエディタを用いて記事を公開するまでの流れと、ブロックの基本操作について紹介します。
プラグインを作成 独自のブロックはプラグインで作成するのが一般的なようです。 プラグインの詳しい作り方については以下をご参考ください。 https://haniwaman.com/my-plugin/ my-gutenbergをpluginsフォルダ内に作成してindex.phpを作成して以下を記述します。 「My Gutenberg」というプラグインがプラグイン一覧に表示されるようになるので、有効化しておきます。 Gutenbergブロックの作成方法 ブロック用のスクリプトを登録ブロックの定義を登録ブロックの内容を登録 1.ブロック用のスクリプトを登録と2.ブロックの定義を登録はinitをフックにしてregisterを登録します。3.ブロックの内容を登録については、JavaScriptで記述していきます。 ブロック用のスクリプトを登録 WordPressでスクリプトを登録するためのwp_
WordPress5.0から導入された新しいエディタ「Gutenberg(ブロックエディタ)」ですが、慣れると非常に便利で使い勝手が良いです。一度慣れてしまうと旧エディタには戻れないですね。 Gutenbergで記事を書く際、編集画面の見出しや本文にはGutenberg用のデフォルトスタイルが当たっています。すごく見にくいわけではないですが、なるべく実際にブログを表示した時に近い状態で編集したいと思う方は多いのではないでしょうか。 そんなわけで今回は、Gutenbergの編集画面に独自のスタイル(CSS)を適用する方法をご紹介したいと思います。この方法を使えば、実際の表示と同じような見た目で記事を編集することができるようになります。 Gutenbergの編集画面に独自のスタイルを適用する方法 Gutenbergの編集画面に独自のスタイルを適用する方法は、2通りの方法がありますので、それぞれ
WordPress5.2以降は「ブロックマネージャー」から非表示にしたいブロックを設定可能でしたが、WordPress5.9より「設定」→ブロック→表示ブロックへ移動しました。 WordPress5.9以降であれば「設定」からブロックの非表示設定ができます。 投稿・固定ページ編集画面にて、右上の歯車アイコンの右の三点リーダをクリックすると、メニューが表示されるので「設定」をクリックしてください。 「ブロック」タブに切り替えて「表示ブロック」にて、非表示にしたいブロックのチェックを外してください。 ただ、この方法の場合、設定を知っている人なら誰でも変更できるので、使おうと思えば使えてしまいます・・・ プラグイン「 Disable Gutenberg Blocks – Block Manager 」を使う プラグイン「 Disable Gutenberg Blocks – Block Mana
WordPress ブロックエディター Gutenberg に対応 WordPress 5.0 から導入されたブロックエディター（Gutenberg）を使った場合に、作成したテーマを対応させるための覚え書きです。 テーマにブロックエディターのスタイルを適用させたり、逆にブロックエディターにテーマのスタイルを適用させる方法などについての個人的なメモです。 テーマにブロックエディターのスタイルを適用 ブロックエディター（Gutenberg）を使ってコンテンツを作成すると、使用したブロックにより特定のクラス（wp-block-xxxx や has-text-color 等）やインラインのスタイルなどが追加されます。 また、add_theme_support() などを使用してオプションのスタイルや機能を有効にすると、それに伴い追加のスタイルが読み込まれたりもします。 デフォルト（初期状態）では、
Gutenberg ブロック開発の基本
目的 手を動かしながら、ブロック開発の流れを理解する。ブロック開発の用語を知る。 本記事をもとに社内勉強会を行いました。その際の動画アーカイブもご参考ください。 開発環境 DockerNodeJS（NPM） ブロックを作っていく 例として、アラートブロックを作っていきます。 画像のように、サイドバーからブロックの背景色を切り替えることができます。 ボイラープレートを作成 下のコマンドで、ブロックの雛形ができます。
#この記事は？ Wordpressの新エディタGutenbergをいじってて よく使いそうだと思ったコンポーネントをまとめていきます 追記編集していきます TextControl と TextareaControl テキスト編集のコンポーネント。 onChangeでイベントオブジェクトじゃなく中身の文字列だけが渡されるようになってるので、値の取り出しとかしなくていいので普通にtextareaとか書いちゃうより楽です。 const {TextControl, TextareaControl} = wp.components; registerBlockType('myPlugin/myBlock',{ edit({attributes,className,setAttributes}){ return [ <TextControl onChange={(newText1)=>setAttri
GutenbergのブロックをAdvanced Custom Fields的に使ってみる | HPcode（えいちぴーこーど）
Gutenbergにはテンプレート機能があり、利用するブロックを制限することが可能です。このテンプレート機能を使うことで、「Advanced Custom FieldsAdvanced Custom Fields」でやっていたような限定的な入力欄をブロック上に再現することができるようになりました。 この記事では、Gutenbergにはテンプレート機能を使って店舗情報を繰り返すといったエディタを作ってみます。 ACFをブロックのテンプレート機能で代替できると聞いてやってみたら、できた…！すごい！ ブロック作るの楽しい☺️ ↓は導入文と店舗情報の繰り返しブロック以外は無効化した例 pic.twitter.com/l2JNNAYF4D — はにわまん (@haniwa008) April 24, 2020 今回紹介する内容ともっとも近いWordPressドキュメントになります。こちらも合わせてご
WordPress 5.5のリリースに伴いGutenbergへ新たに追加されたブロックパターンのカスタマイズで、デフォルトで用意されているブロックパターンやパターンカテゴリで不要なものを削除したり、逆にオリジナルのブロックパターンやパターンカテゴリを追加する方法です。 ブロックパターンを削除する ボタンを2つ横並びにしたブロックやイメージ・テキストのカラムブロックなど、ブロックパターンには予めデフォルトパターンとして10種類が用意されています。 それらが不要な場合はunregister_block_pattern()を用いてfunctions.phpへ下記のように記述します。 add_action( 'init', 'remove_default_block_pattern' ); function remove_default_block_pattern() { $patterns =
WordPress 関連リンク JavaScript ビルド環境のセットアップ（@wordpress/scripts） @wordpress/create-block パッケージ ブロックの作成 チュートリアル（create-block） JavaScript Build Setup（英語） @wordpress/create-block（英語） Create a Block Tutorial（英語） @wordpress/scripts (wp-script) npm 関連リンク @wordpress/scripts @wordpress/create-block 関連ページ Node.js を Mac にインストール（nodebrew の使い方） npm の基本的な使い方 webpack の基本的な使い方 React を使ってみる（基本的な使い方） このページ以外にも以下のようなブロッ
Lazy Blocks - Gutenbergのカスタムブロックが管理画面から作成できるWordPressプラグイン | ブログ | 静岡県のホームページ制作 | 6666666 セブンシックス
ごきげんよう、Gutenbergを使っていますか？まだClassic Editorが恋しいですか？セブンシックスでは、標準で導入するプラグインの見直しなどを経て、クライアント案件でもGutenbergを積極的に採用しています。今回は、Gutenbergを採用した開発時に嬉しいプラグイン「Lazy Blocks」の紹介です。 Lazy Blocksとは Lazy Blocksは、コーディング知識なしでGutenbergのカスタムブロックを作成できるWordPressプラグインです。 公式サイト https://lazyblocks.com/ ダウンロード https://wordpress.org/plugins/lazy-blocks/ これまでGutenbergは、カスタムブロックを追加する難易度の高さがネックでした。例えば「AddQuicktag」などで実現していた独自のマークアップを
Gutenbergでオリジナルのブロックパターン登録方法 - ブロックエディター私的マニュアル（α）
Gutenbergでオリジナルのブロックパターン登録方法 Posted: 2020/7/16 Updated: 2020/7/16 これはプラグイン版のGutenberg（ver 8.5.1）を有効化して確認しています。UI等は変更になる可能性が大いにあります！（現に、8.4からブロック選択のUIが変わっています） プラグインを入れれば同様の動作は確認できますが、開発版とも言えるものなので、本番環境へ導入するのは相当の理由がない限り控えましょう。 前回のブログで、WordPress 5.5 に新しく「ブロックパターン」が追加されることを紹介しました。 今回は、自分で新しいブロックパターンを登録する方法をご紹介します。 ブロックエディターハンドブックには、パターンの登録・削除・パターンのカテゴリー登録・パターンのカテゴリー削除の方法が載っています。 パターンを登録する register_bl
タグ BD動画編集・加工ソフトネタノートパソコンパソコン関連プラグインマンガメンズ、小物メンズファッションロリポップ、LOLIPOP、レンタルサーバー会社健康・美容写真加工アプリ、無料広告ドッカンバトル、ゲームアプリ、バンダイナムコ日常普通車書籍、雑誌格安SIM楽天モバイル水筒、1000ml生活画像・動画編集画像編集・加工ソフト節約軽自動車靴、シューズドラゴンボール超ソーシャルメディアCX-3WordPress、初心者DIYDVDIIJMIOipadminiLION MEDIA、WordPressテーマMagniflex、メッシュ・ウイングMAZDAMAZDA、デミオN-BOXPCゲームSyortcodes UltimateWindows１０WordpressテーマスマートフォンアプリZE520KLZenfone3アニメアフィリエイトインターネットイニシアティブウインドウズおすすめザ・トー
Gutenbergでオリジナルなブロックを作成するには「Block Lab」が簡単すぎる件 | HPcode（えいちぴーこーど）
JavaScriptでのGutenbergのブロック作成の知識がなくても「Block Lab」を使えば簡単に作成できるので、サクッとオリジナルなブロックを作りたい方はぜひ使ってみてください！ #wctokyoで教えてもらった「Block Lab」が凄い…！ コード書けなくても管理画面からブロック作り放題です。 使い方のイメージ的には「Advanced Custom Fields」のブロック版みたいな！ pic.twitter.com/BceRc089If — はにわまん (@haniwa008) November 4, 2019 Block Labのインストール プラグイン → 新規追加 → キーワード「Block Lab」 → 今すぐインストール → 有効化 インストールされると左側に「Block Lab」のメニューが登場します。 Block Labの使い方 「Example Block
WordPressのGutenbergではブロックごとにテキストや画像を入れます。ブロックとは以下のようにアイコン化されていて、入力したい内容に沿って選択します。（例：画像を挿入したかったら画像のアイコンを押す） 今回はこのブロックを自分で作れるプラグイン、Lazy Blocksの使い方を説明します。 Lazy Blocksで自由にカスタムブロックを作る方法 まずはLazy Blocksをインストールして、有効化しておきましょう。 新しいブロックは【Lazy Blocks】 > 【新規作成】 で作ります。 ステップ１：ブロックの登録 ブロックに必要な名前やアイコンなどを登録していきます。 全部を入力する必要はありませんが、必ず入力しないといけないのは以下の３項目です。 タイトルSlugアイコン 登録したブロックを特定の投稿タイプにだけ表示させたい場合はConditionから選べます。（投稿
Gutenbergの大きな特徴のひとつとして、コードがわからない人でも自由且つ簡単に好きな見栄え・レイアウトを実装できるというものがありますが、それを何らかの理由で制限したいときに使える方法です。 特に毎回決められた項目のみ入力するような作りの投稿タイプやページがある場合に便利だと思います。 ブロックの操作はtemplate_lockというプロパティで制限することができます。 template_lockを指定しないデフォルトの状態ではブロックの追加・削除・移動など自由に操作することができますが、allでそれらを完全に制限し、insertはブロックの追加・削除はできませんが移動はできるという制限をかけます。 具体的な使用例として、例えばとあるサイトで「イベント」という投稿タイプを作成し、そこでは基本的に下記内容の情報しか入力しないので他のブロックは必要ないという仕様だったとします。 キャッチ
WordPress：ブロックを組み合わせた様々な見栄えをコピペで配置できる「Gutenberg Template Library」 - NxWorld
「Gutenberg Template Library」は、Gutenbergの各ブロックを組み合わせることで作成できる様々な見栄えをまとめたコレクションサイトです。 別途CSSを追記したりプラグインを併用するものもありますが、サイトでよくある見栄えをコピペで簡単に配置できます。 サイトではイメージのように様々なテンプレートがキャプチャ付きで並んでおり、現時点で172パターン用意されています。 また、各テンプレートは「ヒーロー」「プライス」「特徴」など下記の14カテゴリーに分かれており、ページ上部にあるナビゲーションで絞り込んで閲覧することができます。 Hero Testimonial Team Stats Pricing Logos Gallery Features FAQ Content Contact Card Slider CTA コピペで実装できる 一覧から配置したいテンプレート
ファイルの作成 この例ではファイルの作成及び JavaScript 環境の構築は create-block を使って行っています。 カスタムブロックをプラグインとして作成するので、ターミナルでプラグインディレクトリに移動して npx コマンド「 npx @wordpress/create-block 」を実行します。 以下では対話モードで実行していますが、slug とオプションを指定して実行することもできます。 関連ページ：Gutenberg ブロック開発の環境構築 $ npx @wordpress/create-block return //create-block を対話モードで実行 npx: 217個のパッケージを33.092秒でインストールしました。 //対話的にオプションを設定 //ファイルの出力先ディレクトリ名に使用される文字列（slug）を指定 ? The block slu
Gutenberg使用時に不要項目を非表示にして、表示切り替えオプションからも削除する方法です。 同様のことをクラシックエディタで行う際はremove_meta_box()を用いていましたが、Gutenbergの場合はremove_post_type_support()やunregister_taxonomy_for_object_type()を用います。 デフォルトではイメージ右側のように様々な項目が用意されていますが、サイト構成的に不要なものがあって非表示（機能削除）にしたい場合は、functions.phpへ下記のように記述します。 add_action( 'init', 'remove_block_editor_options' ); function remove_block_editor_options() { remove_post_type_support( 'post',
ただ、この方法の場合はドロップダウンでまとめることはできません。 Gutenberg プラグイン v5.3 または WordPress v5.2 からはデフォルトのボタンとともにドロップダウンにまとまるようになりましたが、独自のボタンだけでまとめたいこともあるでしょう。 ここでは独自のドロップダウンに追加する方法を紹介します。 BlockFormatControls ボタンなどを追加できる場所はいくつか用意されています。 ツールバーへ追加するには『BlockControls』または『BlockFormatControls』を使用します。 デフォルトのツールバーボタンよりも後ろに追加する場合は『BlockFormatControls』を使用します。 registerFormatType は RichText.ToolbarControls Slot を利用するための Fill を生成するよう
WordPress Gutenbergカスタムブロック + カスタム設定 | ARCHETYP BLOG | Webビジネスに関するUI/UXデザイン｜株式会社アーキタイプ｜ARCHETYP Inc.
こんにちは！3児のパパエンジニアの笹垣です。 以前こちらでWordPressのGutenbergブロック開発についてご紹介しましたが、その後実案件でカスタムブロックを使う機会があり、ブロック開発に加え、カスタム設定機能も追加したので合わせてご紹介します。 先日リリースしたARCHETYP Staffingのメディアサイト「ARCHETYP Staffing Magazine」では、インハウス・フリーランス・制作会社で働くクリエイターやエンジニア、企業のクリエイティブに対する思いなどをインタビューや対談形式で発信していますが、その記事で利用する会話モジュールが欲しいという要望から開発に至りました。 はじめに まずはじめに会話モジュールのカスタムブロックを作成します。 ※カスタムブロックの開発を行う上で必要な知識や環境についてはこちらを御覧ください。 会話ブロックの追加 前回の定義リスト（dl
【WordPress】Gutenberg Componentsを使ってプラグインの設定画面を作る - Qiita
はじめに WordPressプラグインを開発する時に、機能問わず設定ページを作成するケースは多いと思います。 一般的には、add_options_pageフックなどで管理画面に独自ページを追加し、第5引数に指定したコールバック関数内でコンテンツを生成する手法がとられます。 管理メニューの追加 - WordPress Codex 日本語版 今回、カスタムブロック開発にあたって管理画面もReact（Gutenberg Components）で構築してみた所、思っていたよりシンプルに開発できたため、開発の中で得られた知見を、サンプルプラグインを開発するチュートリアル形式で紹介したいと思います。 なぜReactなのか カスタムブロック開発でもないのに、なぜわざわざReactを設定画面に導入するのか、開発の中で感じられたメリットを挙げてみます。 コンテンツ部分をComponentとして切りだせる 従
ちょっと難しそうなGutenbergのブロックカスタマイズ。 既存のブロックにちょこっとスタイルを追加するだけなら意外と簡単だということに気づきました。 そこで、練習も兼ねてボタンブロックに独自のスタイルを追加して、「アイコン付きのボタン」を追加してみます！ WordPress標準のブロックをカスタマイズしてみる Gutenbergのブロック開発はこれまでのPHPカスタマイズと違い、JavaScriptを書くことになり、開発環境を整えるだけでも大変そうなイメージを持っていました… ですが、いざチュートリアルを見てみると、頑張って開発環境を用意しなくてもカスタマイズできそうなことがあったので紹介したいと思います。 ちなみにチュートリアルはこちら▼
WordPress：Gutenbergのデフォルトブロックを非表示にする方法（Ver 5.8対応） - NxWorld
以前Gutenbergのデフォルトブロックを非表示にする方法について紹介したことがありますが、その後バージョンアップによってフック変更（allowed_block_types() → allowed_block_types_all()）・新ブロック追加・ブロックスラッグの変更・方法によっては一部ブロックの表示制御ができなくなるなど何かと変更がありました。 新ブロックや埋め込みブロック関連などまだ内容を把握しきれてなかったり不明点も多いんですが、現状の最新版であるVer 5.8対応版の備忘録として分かる範囲で再度まとめました。 はじめに 以下では必要ブロックを指定するホワイトリスト形式と逆に不要ブロックを指定するブラックリスト形式の2パターンを紹介しており、それぞれをPHPのみで実装する方法とJavaScriptも用いて実装する方法とで同じく2パターン紹介しています。 ただ、以前は可能だった
作成した再利用ブロックをまとめて確認したいときなどに見る再利用ブロック一覧へ容易にアクセスできるようにする方法です。 テーマやブロックなどの開発中で頻繁に確認するようなときは地味に便利だと思います。 メニューに追加する イメージのように「投稿」メニューの上に新たに「再利用ブロック」というメニューを追加し、クリックで再利用ブロック一覧ページに遷移するようにします。 実装にはfunctions.phpへ下記を記述し、名称を変えたい場合は第2引数、アイコンを変えたい場合は第6引数を任意のものに変更してください。 また、表示位置を変更したい場合はサンプルコード内で4としている部分を任意の数値に変更してください。 add_action( 'admin_menu', 'add_wp_block_menu' ); function add_wp_block_menu() { add_menu_page(
【PDF無料】2023年最新：WordPress6.2マニュアル（グーテンベルグGutenberg版） ／ THE MANUAL｜浅見 ゆたか
※2023年8月追記 WordPress6.2の仕様に合わせたマニュアル（ver1.3）をアップしました。（6.2版を作ってる最中に6.3がリリースされちゃったので、一つ前のバージョンでごめんなさい） 埼玉県の横瀬町という小さな町で、Web制作を中心としたクリエイティブを手掛ける合同会社 浅見制作所の浅見（@azamixx821）と申します。 弊社の制作実績もまとめています、よろしければぜひチェックしてみてください！ 普段制作させていただいているWebサイト案件では、主にWordPressを利用しているのですが、クライアント様にマニュアルを要望いただくことが少なくありません。 しかしながら、Web記事では使い方やマニュアルが存在するのですが、意外とこのWeb記事を見て使ってみてくださいとご案内しても、印刷できるマニュアルを求められることが多く… この度、WordPressのデフォルト機能を
WordPress Gutenbergブロック開発 | ARCHETYP BLOG | Webビジネスに関するUI/UXデザイン｜株式会社アーキタイプ｜ARCHETYP Inc.
こんにちは！3児のパパエンジニアの笹垣です。弊社では、WordPressをベースにしたサイト制作についてもよくご相談をいただくのですが、今回はWordPressバージョン5から導入された「Gutenberg」のカスタムブロック開発について備忘録も兼ねてご紹介します。 はじめに WordPressバージョン5が正式リリースされてから4か月。 最新機種の登場はもちろん、Mac OSやiOSのバージョンアップが大好物な自分にとって、WordPress v5リリース時はそこそこ興奮したのを覚えています。 WordPress 5.0 “ベボ” v4以前のWysiwygエディター（Classic Editor）は“ブログ”という側面が強く、エディターのツールバーと改行を駆使して記事を書く形で、行間の調整に苦労したり編集者ごとのトンマナの統一が難しく、案件によってはカスタムフィールドを複数作成して回避す
Gutenbergで管理画面のタグをチェックボックス化する方法
WordPressの編集画面でタグをつける時に、カテゴリのようにタグをチェックボックスで選択したいと思う人は多いと思います。 WordPressのタグをチェックボックス化する方法は検索すると簡単に見つかりますが、Gutenbergに対応していなかったり、そもそもやり方に説明が無く、応用が利きません。 この記事では、Gutenbergに対応したタグのチェックボックス化の方法をご紹介します。この記事を読むことで誰でも簡単に編集画面のタグをチェックボックス化することができます。
WordPressのバージョンが５になって以降、正式なエディタがブロックエディタになりました。 バージョン4.9の時にプラグインとしてGutenbergが紹介されていたのですが、どうも今後このブロックエディタが主流になるような感じですね。 2021年末にClassic Editor（クラシックエディタ）のサポートが終了することが決まっておりそのまま使い続けることは困難かもしれません。 今回は、ブロックエディタ(Gutenberg)を使って目次付きテンプレートと同じようにする使い方を解説します。 いきなりブロックエディタ(Gutenberg)で書いていくのはしんどいかもしれないのでClassic Editor（クラシックエディタ）との併用をおすすめします。 併用する方法は、下記の動画を参考にしてください。 https://www.youtube.com/watch?v=0hot1tqTDvw
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
『ブロックエディタ(Gutenberg)ってWordPressの主流になる？』
GutenbergのブロックスタイルをPHPで簡単に追加する | エビスコム - EBISUCOM
WordPress JSX を使った Gutenberg ブロックの作り方
Gutenberg（ブロックエディター）の使い方の基本 - ブログ武器 Ver.2
WordPress Gutenberg ブロックの作成
WordPress5.3でのブロックエディターの変更点まとめ【Gutenberg】 | WEMO
Gutenbergでサイドバーに選択式のCSSクラス設定を追加する
【図解あり】WordPressブロックエディタ（Gutenberg）の使い方
Gutenbergにオリジナルなブロックを作成する方法（静的編） | HPcode（えいちぴーこーど）
Gutenberg(ブロックエディタ)の編集画面に独自のスタイル(CSS)を適用する方法
Gutenberg（ブロックエディタ）で不要なブロックを隠す方法３選
WordPress ブロックエディター Gutenberg に対応
Wordpress Gutenberg よく使いそうなコンポーネントまとめ - Qiita
WordPress：Gutenbergのブロックパターンやパターンカテゴリを追加・削除する方法 - NxWorld
WordPress Gutenberg ブロック開発の環境構築
Gutenberg対応のWordPressテーマ「STREETIST（ストリーティスト）」が12月31日までセール中！
【WordPress】Lazy Blocksで自由にカスタムブロックを作る方法 - Gutenberg専用プラグイン
WordPress：Gutenbergのブロック操作を制限する方法 | NxWorld
WordPress Gutenberg ダイナミックブロックの作り方
WordPress：Gutenbergの不要項目を非表示にする
Gutenbergのツールバーにドロップダウンを追加する | Technote
【WordPress】ブロックエディター（Gutenberg）のボタンブロックに独自のスタイルを追加してみる
WordPress：管理画面にGutenbergの再利用ブロック一覧へのリンクを追加する方法
ブロックエディタ(Gutenberg)を使って目次付きテンプレートを使ってみる