公開済みページの投稿メタ(カスタムフィールド)データが「プレビュー」によって削除される件について対処してみた。WPワークスホームブログワードプレスのカスタマイズ情報などを紹介しています。チュートリアルカスタマイズワードプレスのセットアップ方法ワードプレス初心者向けです。ドメインの取得とセットアップ必要なサーバー環境のセットアップワードプレスのインストール手順ワードプレスで最初に行うべき設定おすすめのプラグインテーマ「Ace」の特徴当サイトでも使用している自作テーマです。専用プラグイン「Ace+」カスタム投稿タイプページ編集に役立つコンテンツを管理します。CTAを作成してストックできます。表示位置は投稿ページや固定ページにて設定可。ブロックエディタを使って任意のスライダーを作成可能です。作成したスライダーはコンテンツやウィジェットで使用できます。所謂テンプレートです。ウィジェットでも引用する事ができますので、これらの組み合わせによりページの編集が自由自在に。カスタムウィジェットプラグイン「Ace+」に付随するオリジナルウィジェットです。投稿一覧を任意の場所に配置します。投稿ページにて投稿者の紹介をします。キーワード入力するだけでマップを表示します。ページの見出しを拾って目次を生成します。クリックすると見出しの位置までスクロール。SNSシェアアイコンを設置します。マウスでホバーさせるとアイコンがちょっと浮きます。作成したスライダーを表示します。ブロックエディタで簡単に編集できます。あらゆる投稿タイプのコンテンツをウィジェットエリアに出力します。これでフッターも自由にカスタマイズ編集可。カスタムブロックプラグイン「Ace+」により有効化されるオリジナルブロックです。カスタムナビメニューサムネイル付きのスライドメニューなど、オプションが用意されています。カスタムフォント「Googleフォント」+「フォントファイルのアップロード」カスタムCSSCSSファイルを追加できます。お問い合わせホームカスタマイズ公開済みページの投稿メタ(カスタムフィールド)データが「プレビュー」によって削除される件について対処してみた。公開済みページの投稿メタ(カスタムフィールド)データが「プレビュー」によって削除される件について対処してみた。Extensions」のバージョンが既に1.0.21にまで跳ね上がったんですが、送信するデータの数を調節するのにフィルターフックの存在を知りませんでしたので、結局JSONと連想配列で何とかしたのですが、ウィジェットエリアの解説ページに漸くウィジェットを出力できると思ったのですが、新たな問題に気付くことになりました。リンク先の方法では、大量のデータ数をFORM送信する際、制限により送信できない問題を、テキスト形式にして1つのINPUTタグに収めて送信数を減らすという方法を取り、受け取る側でそれを連想配列に展開して、都合のいいように保存する方法ですが、公開済みのページ編集時にプレビューボタンを押すと、投稿メタ(カスタムフィールド)のデータの一部が削除されてしまうという悩ましい問題が起こったんです。ええ、「更新」ボタンを押さずにページを閉じたり移動したりすると、設定していた筈の投稿メタデータが削除されてしまうということで、ブログのように一度公開したら編集しないようなページなら良いのかもしれませんが、固定ページのように公開してからも編集する可能性が比較的高いページでもそれが起こり得るのはちょっと危険な気がしました。これを設定値が上手く保存された状態を保つ為に講じた手段をいくつか紹介しておきます。Trac」というチケットがあって、というか2ヶ月前にもメッセージがあったということは、まだ続いている話なのかなとも思ったんですが、まぁワードプレスの方でもこの問題については認識されているようです。疑問だったのは、今回データが上手く保存されなかったのが、JSON式に切り替えた、もっと言えば、オプショナルアウトプットの連想配列形式に変換したデータのみ削除されていました。変換後の連想配列をforeachで展開しながら、各データをサニタイズ最後に各データをサニタイズした連想配列の形でも「update_post_meta」で保存といった流れの処理をアクションフック「save_post」で行っていました。ところが、プレビュー時のみ、最初のテキスト形式の方は保存されていたんですが、最後の連想配列は空白の配列になってしまったんですよ。foreachループが上手く機能しなかったのか、それともテキストを取得してから階層付きの連想配列への変換までの処理でエラーが出てしまったのか、連想配列の形で保存する筈が空白の配列になっていたというわけです。これは公開前の下書き状態でのプレビューでは起こらない現象だったので、僕も最近まで気付いていませんでした。空白の配列が保存されていたところを見ると、ループ処理が上手く行かなかったということなんでしょうけど、正直どういう処理が行われていたのかが見えないので、見えるようにする方法があれば教えてほしいですね。対処方法として気になったのが、テキスト形式のデータが保存されていたように、一部のデータは上手く保存されていることです。ええ、全てのデータが保存に失敗するわけじゃないようで、そこにちょっと活路を見出そうかと。いっても、実際に行ったのはサニタイズ過程で、各データをまとめる前に1つずつ保存することです。保存処理はこんな感じに編集し直します。次に、HTMLに出力する際、今までは保存した連想配列をそのまま展開して、各フォームのINPUTタグなどの設定値として使っていましたが、テキスト形式のデータを連想配列に変換する処理から始めました。あとは、消えてしまう事態も想定して、連想配列のカウントでforループを使い、各データを配列から取得する際、連想配列のインデックスがセットされていない場合は、各データ毎に保存した値を「get_post_meta」で引っ張ってくるようにしました。Extensions」最新版では、上手く機能してくれるんじゃないかと思います。保存処理を行う関数・メソッドをAJAXで処理できるようにし、プレビュー時にトリガーされるようにしておくと便利です。)」を用意するだけでした。プレビューボタンのIDは「post-preview」ですので、セレクターを間違えないようにすれば大丈夫だと思いますが、実際にAJAXによる保存処理で、プレビュー時にワードプレスによって行われる処理で消データが消えるのを絶対に防げるとは言えないんですが、気休めにはなるかもしれません。確実に保存されるには?ここで書くのは、PHPやJavaScriptコードによる処理ではなく、管理画面でページ編集時に行うべき処理なのですが、公開済みページの「プレビュー」ボタンを押した後、プレビューに投稿メタ(カスタムフィールド)設定が反映されていないとちょっとでも感じたら、編集画面の投稿メタのフォーム内にあるINPUTタグなどに、値が入力されている内に一度「更新」ボタンをクリックして保存することが確実な対処法です。この場合は、入力されているデータが正しく、プラグインやテーマによって定められた方法で保存されます。危険なのが「プレビュー」ボタンを押した後、「更新」ボタンを押すなどして保存せず、ページのリロードをしたり、別のページに移動してしまうことです。プレビューボタンによってデータが消えても、INPUTタグ内に出力されている値に変更が無いために、ポップアップが起こらないんですよ。保存してからプレビューするとなった場合だって有り得るからです。Extensions」のオプショナルアウトプットのように起こりえるので、万が一「データが消えてる?」と感じたら、念の為に保存を忘れないNora著者WPワークスの管理人です。リポジトリにも数件アップロードしています。Export」の使い方コラム2019/06/01もうすぐテーマ「Ace」のレビューが始まります。Holder」が承認されました。Holder」をアップロードカスタマイズ2019/05/12独自のアップデートチェッカーを作成する際、更新用のZIPファイルにおける注意点コラム2019/05/12Gutenbergのバグですかねコラム2019/05/12テーマをプラグインとに切り離しました。コラム2019/05/04テーマ「Ace」をアップロードする方向にFlip前のページ大量のFORM送信をコンパクトにする方法。コメントデータの処理方法の詳細はこちらをご覧ください。新着記事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検索ホーム上ウィジェット。