大量のFORM送信をコンパクトにする方法。WPワークスホームブログワードプレスのカスタマイズ情報などを紹介しています。チュートリアルカスタマイズワードプレスのセットアップ方法ワードプレス初心者向けです。ドメインの取得とセットアップ必要なサーバー環境のセットアップワードプレスのインストール手順ワードプレスで最初に行うべき設定おすすめのプラグインテーマ「Ace」の特徴当サイトでも使用している自作テーマです。専用プラグイン「Ace+」カスタム投稿タイプページ編集に役立つコンテンツを管理します。CTAを作成してストックできます。表示位置は投稿ページや固定ページにて設定可。ブロックエディタを使って任意のスライダーを作成可能です。作成したスライダーはコンテンツやウィジェットで使用できます。所謂テンプレートです。ウィジェットでも引用する事ができますので、これらの組み合わせによりページの編集が自由自在に。カスタムウィジェットプラグイン「Ace+」に付随するオリジナルウィジェットです。投稿一覧を任意の場所に配置します。投稿ページにて投稿者の紹介をします。キーワード入力するだけでマップを表示します。ページの見出しを拾って目次を生成します。クリックすると見出しの位置までスクロール。SNSシェアアイコンを設置します。マウスでホバーさせるとアイコンがちょっと浮きます。作成したスライダーを表示します。ブロックエディタで簡単に編集できます。あらゆる投稿タイプのコンテンツをウィジェットエリアに出力します。これでフッターも自由にカスタマイズ編集可。カスタムブロックプラグイン「Ace+」により有効化されるオリジナルブロックです。カスタムナビメニューサムネイル付きのスライドメニューなど、オプションが用意されています。カスタムフォント「Googleフォント」+「フォントファイルのアップロード」カスタムCSSCSSファイルを追加できます。お問い合わせホームカスタマイズ大量のFORM送信をコンパクトにする方法。大量のFORM送信をコンパクトにする方法。Extensions」のポストメタによるオプショナルアウトプット機能が、5つ程度しかアイテムを保存できなかった問題があり、「ブログ・更新情報」でもデータを1つにまとめれば何とかなるかもと思って書いたのですが、実際に試してみました。Extensions」最新版を参考にしていただければと思います。JavaScriptが使える環境であれば(使えない環境の方が珍しいと思いますが)、ワードプレス以外でも使えると思いますので、僕みたいな状況に陥っていた場合は試してみてください。Extensions」には、ポストメタ(ページ毎の設定)によりウィジェットエリアにアイテムを出力できる機能がテーマ「ShapeShifter」に追加されます。ええ、ウィジェットをコンテンツページの編集で追加できますので、ウィジェットだけで良いのであれば、それだけでコンテンツを作成できてしまうような機能なのですが、選択肢を多く用意していて、その値によって表示・非表示のみを行って、編集できるようにしていたのですが、保存するために送信するデータが膨れ上がってしまい、アイテムが多くても5つ程度しか保存できないようになってしまっていました。保存処理が上手く行かないのではなく、送信自体出来ていませんでしたので、メタボックスのFORMタグで送信できるデータの数が決まっていることを初めて知って焦ったという訳です。データのサイズではなく、例えば、大量のINPUTによって、数多くのデータを送信する場合の話です。これじゃいかんということで、膨大になったデータを1つのINPUTタグの値にまとめてしまうことにしました。JSONを1つのINPUTタグに用意したINPUTタグなどのデータを1つの変数にまとめてしまって、INPUTタグに入れてしまうこと自体はテキスト(String)形式にすれば大丈夫なのですが、INPUTタグのNAME値には[]で囲って配列化されたものを受け取れるようになっています。ええ、僕は関数を知らなかったので、テキスト形式からPHPで受け取りたかった連想配列形式に変換することと、それと同時にサニタイズして、出力時に使用する値に反映させる作業が非常に面倒でした。)」までINPUTタグなどが使用されているラッパー要素をjQueryで指定して、「input」「textarea」「select」など取得したいデータを持つ要素に「addClass」でクラスを与えてマーキングしていきます。);次にマーキングしたクラスを指定して、JSON形式の変数に、jQueryなどで「name」属性値をキーにして「value」値を取得させていきます。この時、僕はJavaScriptに慣れていなかったのでPHPで受け取ってから処理しましたが、先に「[child]」内の値をキーにして、階層を持たせるようにしておくと後が非常に楽になると思います。)」を送信用の「hidden」タイプのINPUTタグに与え、マーキングしたクラスを全て「disabled」にしてしまうだけです。マークした要素に「disabled」属性を与えて、Form送信しないように。);});まぁざっくり書きましたが、これで「hidden」タイプのINPUTタグからのみJSONのStringデータを受け取ることが出来るようになり、マークしたINPUTタグからは何も送信されなくなります。[child]が残らないように配列化処理JSONのテキスト形式の値を受け取るとエスケープもされているので、ちょっと不便な形になっています。「json_decode」が使えない状態になっているんですよ。僕は手っ取り早くするためにMySQLに一旦保存してアンエスケープ(?)して、その保存した値を取得することでそのまま「json_decode」できるようにしています。テキストも元々保存するつもりでしたから、個人的には有りだと思っています。あとは「json_decode」で連想配列化してから、「[child]」毎に階層を作って整理してやればOKです。僕はPHPで処理したのですが、JavaScriptで処理したのであれば不要の処理です。いうか僕もJavaScriptで処理できるようにしようと思っています。これが本来の方法じゃないか、とようやく思い至った訳です。FORM送信できる数に限度があるとは思っていなかったので気に留めたことはなかったのですが、実際に問題に直面してみると、受信側の処理を自分で書けるなら、何かしらの方法で1つにまとめてしまった方が良いです。お陰さまでオプショナルアウトプット機能で設定できるアイテムの数の厳しい制限が緩和されました。実は気付いたきっかけはウィジェットエリアの表示例としてこの機能を使おうと思ったんですが、数多く用意したウィジェットエリアの全てにアイテムを出力できないという事実に直面したのがきっかけです。ええ、本来は解説用のページで僕が使いたかっただけなんです。そりゃ特定のページにウィジェットを10個以上も追加することもないと思っていましたし、そんな人いないと思っていましたから、まさか自分がそれに該当するとは思ってもいなかったんですよ。何か不具合があれば修正致します。Nora著者WPワークスの管理人です。リポジトリにも数件アップロードしています。Export」の使い方コラム2019/06/01もうすぐテーマ「Ace」のレビューが始まります。Holder」が承認されました。Holder」をアップロードカスタマイズ2019/05/12独自のアップデートチェッカーを作成する際、更新用のZIPファイルにおける注意点コラム2019/05/12Gutenbergのバグですかねコラム2019/05/12テーマをプラグインとに切り離しました。次のページ公開済みページの投稿メタ(カスタムフィールド)データが「プレビュー」によって削除される件について対処してみた。1件のピン公開済みページの投稿メタ(カスタムフィールド)データが「プレビュー」によって削除される件について対処してみた。コメントデータの処理方法の詳細はこちらをご覧ください。新着記事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検索ホーム上ウィジェット。