カスタムブロックのAttributesにはobjectタイプが存在しないらしい。WPワークスホームブログワードプレスのカスタマイズ情報などを紹介しています。チュートリアルカスタマイズワードプレスのセットアップ方法ワードプレス初心者向けです。ドメインの取得とセットアップ必要なサーバー環境のセットアップワードプレスのインストール手順ワードプレスで最初に行うべき設定おすすめのプラグインテーマ「Ace」の特徴当サイトでも使用している自作テーマです。専用プラグイン「Ace+」カスタム投稿タイプページ編集に役立つコンテンツを管理します。CTAを作成してストックできます。表示位置は投稿ページや固定ページにて設定可。ブロックエディタを使って任意のスライダーを作成可能です。作成したスライダーはコンテンツやウィジェットで使用できます。所謂テンプレートです。ウィジェットでも引用する事ができますので、これらの組み合わせによりページの編集が自由自在に。カスタムウィジェットプラグイン「Ace+」に付随するオリジナルウィジェットです。投稿一覧を任意の場所に配置します。投稿ページにて投稿者の紹介をします。キーワード入力するだけでマップを表示します。ページの見出しを拾って目次を生成します。クリックすると見出しの位置までスクロール。SNSシェアアイコンを設置します。マウスでホバーさせるとアイコンがちょっと浮きます。作成したスライダーを表示します。ブロックエディタで簡単に編集できます。あらゆる投稿タイプのコンテンツをウィジェットエリアに出力します。これでフッターも自由にカスタマイズ編集可。カスタムブロックプラグイン「Ace+」により有効化されるオリジナルブロックです。カスタムナビメニューサムネイル付きのスライドメニューなど、オプションが用意されています。カスタムフォント「Googleフォント」+「フォントファイルのアップロード」カスタムCSSCSSファイルを追加できます。お問い合わせホームコラムカスタムブロックのAttributesにはobjectタイプが存在しないらしい。カスタムブロックのAttributesにはobjectタイプが存在しないらしい。attributes,カスタムブロック,グーテンベルグカスタムブロックを作成する際、値を保存する時に気を付ける点についてです。タイトルにもあるように、カスタムブロックの作成に関する話ですので、カスタムブロックの作成方法をご存知でない場合は先にそちらの記事をご参照ください。最近はテーマ「Ace」用にSwiperのスライダーブロック(+投稿タイプ+ショートコード+ウィジェット...)セットを作成しているのですが、オプションを属性値として登録して保存しているんですが、結構な量ですので項目毎に分類しています。今回はそれでふと思い出した備忘録です。カスタムブロック作成時のハマった事例集でも作ろうかと思ってしまうくらいにこの手のネタは尽きません。ContentsAttributesが保存できる値Gutenbergでカスタムブロックを登録する際のパラメータに、使用するデータの型を予め登録するのですが、以下の型が登録できるデータタイプです。booleannumberstringarray他にもあるかもしれませんが、とりあえず「object」は無理でした。object型では、保存メソッド「setAttributes」がコールされると、一時的にattributesとして保存されたように見える(コンソール系メソッドで値を確認する限り)んですが、ページをリフレッシュすると結局うまく保存されていませんし、フォーム系DOMのビューに変化が起こりません。選択しているブロックを切り替えると値が反映されていますが、ページをリフレッシュするとやはり保存されていないことが分かります。オブジェクト形式では保存されていなかったという話です。解決策はJSON第一候補として似たようなことをしたい場合、arrayを使用することが考えられます。具体的には配列にキーとなる値も合わせて保存させ、更新用メソッドがコールされる度に古いデータと入れ替える形で保存することです。設定項目が多かったり、グループ毎に設定を分けて管理したい場合など、データをひとまとめにしておきたかったのですが、PHPの連想配列的な形で保存しておきたい場合もあるかと思いますので、データの基本的な形としてJSONを使います。GutenbergではワードプレスのRestAPIを使用しているそうで、そちらの都合で受け渡しするデータの型に幾らかの制限があるのでしょう。したらJSONと指定すればオブジェクトのまま使えた、或いは将来的に使えるのかも知れませんね。JSONでのデータのやりとりはやはりベターGutenbergだけでなく多くのオプション値をフォーム送信する際にはかなりJSONは役に立ちます。ShapeShifterでウィジェットエリアにオプショナルでサブコンテンツを出力するようなメタデータを実装した際は、ユーザーが任意で保存するデータの数を増減させることができるものでしたので、保存する際に全てのデータを一旦JSON化して纏めてから送信するようにしていました。送信する数が多くなり過ぎると、送信可能な上限を越えてしまう場合もありますし、他のプラグインとも一緒に使う場合を考慮すると、リソースをなるべく節約しておきたいですから。そんなに大量にinputタグなどを使用する機会は殆ど無いと思いますけどね。Nora著者WPワークスの管理人です。リポジトリにも数件アップロードしています。Export」の使い方コラム2019/06/01もうすぐテーマ「Ace」のレビューが始まります。Holder」が承認されました。Holder」をアップロードカスタマイズ2019/05/12独自のアップデートチェッカーを作成する際、更新用のZIPファイルにおける注意点コラム2019/05/12Gutenbergのバグですかねコラム2019/05/12テーマをプラグインとに切り離しました。コメントデータの処理方法の詳細はこちらをご覧ください。新着記事2019/05/24JavaScriptでウィジェットエリアHTMLを取得するにはワードプレスをヘッドレスで使用することを想定すると、フロントエンド側で困るのはウィジェットな気がします。以前、アップデートチェッカーを作成する方法を書いたことがあるのですが、そういえばZIPファイルについて書いていなかったのでちょっと追記するような形で書いておきます。以前Gutenbergのカスタムブロックの追加方法を紹介しましたが、今回は具体例と一緒に解説です。先に解説に役立つ知識として以下の記事を書いていますので、その紹介をしておきます。ワード2019/04/17メインクエリでループするブログページなどをエディタで編集可能にするには?ブログページなどをエディタで編集可能にするのは、ちょっと面倒なカスタマイズかもしれません。ワードプレスにはフロントエンドの基本的なページの種類として以下のような形になっています。jQueryテーマで簡単に設定できるようにテキストのエフェクトを追加できるようにしようと、試しでとりあえずこんな感じのエフェクトを1つ作成しましたので、備忘録として文字毎にエフェクトを与える方法を書いておきます。2019/04/08jQuery不要の便利なスライダー「Swiper」の使い方テーマ「Ace」で採用しているスライダーライブラリについての紹介です。この例はテーマ「Ace」でのスライダー機能で作成したデモですが、このようにネスト化して複数のエ2019/04/05ナビメニューに編集項目を追加する方法ちょっとだけ厄介なカスタマイズについてです。ナビメニューの設定項目を自由に編集したいと思った方もいるでしょう。Plus」などを使っている人が多くいらっしゃると思いますが、目次って実は結構簡単に作成出来ちゃいます。Icons(MDI)」を例に挙げて、使い方をさらっと紹介いたします。Export」の使い方ワードプレスの記事を含むデータをCSV/XMLでエクスポートする無料のプラグインツールの使用方法についてです。エクスポートするプラグインの数は、リポジトリから探してみると案外少ないので、個人的2019/05/24JavaScriptでウィジェットエリアHTMLを取得するにはワードプレスをヘッドレスで使用することを想定すると、フロントエンド側で困るのはウィジェットな気がします。以前、アップデートチェッカーを作成する方法を書いたことがあるのですが、そういえばZIPファイルについて書いていなかったのでちょっと追記するような形で書いておきます。以前Gutenbergのカスタムブロックの追加方法を紹介しましたが、今回は具体例と一緒に解説です。先に解説に役立つ知識として以下の記事を書いていますので、その紹介をしておきます。Apps」AMPもSSLもそうですが、簡易的なPWAもリポジトリからインストールできるプラグインで対応させてしまうことができます。WorkerというJavaScriptのAPIを使用するWPワークスダウンロードコンテンツやワードプレスのカスタマイズ方法を配信中。Ace検索ホーム上ウィジェット。