WPワークスホームブログワードプレスのカスタマイズ情報などを紹介しています。チュートリアルカスタマイズワードプレスのセットアップ方法ワードプレス初心者向けです。ドメインの取得とセットアップ必要なサーバー環境のセットアップワードプレスのインストール手順ワードプレスで最初に行うべき設定おすすめのプラグインテーマ「Ace」の特徴当サイトでも使用している自作テーマです。専用プラグイン「Ace+」カスタム投稿タイプページ編集に役立つコンテンツを管理します。CTAを作成してストックできます。表示位置は投稿ページや固定ページにて設定可。ブロックエディタを使って任意のスライダーを作成可能です。作成したスライダーはコンテンツやウィジェットで使用できます。所謂テンプレートです。ウィジェットでも引用する事ができますので、これらの組み合わせによりページの編集が自由自在に。カスタムウィジェットプラグイン「Ace+」に付随するオリジナルウィジェットです。投稿一覧を任意の場所に配置します。投稿ページにて投稿者の紹介をします。キーワード入力するだけでマップを表示します。ページの見出しを拾って目次を生成します。クリックすると見出しの位置までスクロール。SNSシェアアイコンを設置します。マウスでホバーさせるとアイコンがちょっと浮きます。作成したスライダーを表示します。ブロックエディタで簡単に編集できます。あらゆる投稿タイプのコンテンツをウィジェットエリアに出力します。これでフッターも自由にカスタマイズ編集可。カスタムブロックプラグイン「Ace+」により有効化されるオリジナルブロックです。カスタムナビメニューサムネイル付きのスライドメニューなど、オプションが用意されています。カスタムフォント「Googleフォント」+「フォントファイルのアップロード」カスタムCSSCSSファイルを追加できます。僕も最近まで「$this->id」で取得できるものだと思い込んでいたんですが、実際は少し異なるものでびっくりしたんです。そもそも何故こんなことをしているのかですが、フォーム内でJavaScriptの変数名にIDナンバーを使用し、その変数にJSON型にしたウィジェットアイテムの設定値を保存し、ボタンで呼び出すメソッドの引数などである程度自由に使えるようにしたかったからです。ええ、テーマ「ShapeShifter」用に新しくスライダー機能のウィジェットを作成しています。今回は「ウィジェットを新しく配置してから最初に保存するまで」の間で、この内の「form」が出力する箇所のウィジェットのIDナンバーについて紹介します。先に書いておきますが、本当に細かい話ですので、まだウィジェットを作成したことがない人は、ウィジェットアイテムの基本的な作成方法については、「」で作り方を紹介していますので、そちらをご参照ください。良い方法があるようでしたらご提案いただけると有難いです。Contents追加時のIDナンバーの仕組みウィジェットの元になる親クラス「WP_Widget」により、各ウィジェットには自動で生成されるIDが備わっています。ええ、「$this->id」です。$number;となっており、この時に使用されている変数「$number」は、同じ関数内で「$this->number」と同じ値に設定されます。strtolower($id_base);といった形で、クラス名を小文字化したものが使用されています。)」といった形で(このメソッドも「$this->number」の値が含まれています。)、フォームのinputタグなどの属性値に使用されますから、通常IDのみで使用することは殆ど無いと思いますが、実際に「$this->number」を「echo」してみると、ウィジェットを新しく配置した時だけ数値以外のものが返ってくるんです。ソースを読んでいないのでどこまで正確なのか分かりませんので、詳しい方がいると助かります。フォーラムにでも書いてみようかな。)」といった形で使用されているinputタグの属性値にはちゃんとIDナンバーが数値として入っているのに、何も無いところで「echo」した「$this->number」は「__i__」と定義されているんです。これはあくまで新しくウィジェットを配置した時のみで、通常既に配置されているウィジェットなど、一度保存をしてしまった後は、何の問題もなくIDナンバーとして使用できます。「__i__」が変換される条件(推測)色んな箇所で試してみましたが、1つだけは条件が分かりました。それが「HTML要素の属性値に使用されている場合」です。input要素のvalue値やidの一部に使用するなどの場合は、「__i__」はIDナンバーに変換されるようになっており、それ以外の場所では変換されず「__i__」のままですので、テキストとして出力してもIDナンバーは出てきませんので気を付けましょう。「__i__」は出力後に変換されるが...おそらくJavaScriptで変換されていると思うんですが、一度出力した後で値がIDナンバーに変更されていることが分かります。変換されるであろうと予想して、inputなどのvalue属性値などに入れておき、jQueryでそれを取得してみても「__i__」のままだったんですよ。)」だったり、「setTimeout」で時間差で読ませたりしてみたんですが、「__i__」しか取得できなかったので、jQueryで取得することは諦めました。すればIDナンバーを取得できるのか生成されるIDナンバー「$this->number」の値を取得するには、「$this->get_settings()」というメソッドを使用します。これは同じウィジェットアイテムの設定をまとめて取得するメソッドで、複数配置されている場合は、そのウィジェットの数分の配列で取得できるようになっています。これで取得した配列のインデックス値の最大値がウィジェットアイテムのIDナンバーになっています。}こうしておくと、ページロードした時のウィジェットナンバーの最大値を取得できますので、新しく配置したウィジェットアイテムのIDは、これに「プラス1」すればOKになるんですよ。この「$this->get_settings()」は、ウィジェット配置時には現在の設定ではなく、どうやらページをロードした時点での設定が取得されるようですので、複数を新規配置することを想定すると、加算値にもプラス1しておく必要があることを忘れないようにしましょう。ページをロードしない状態であれば、ウィジェットの削除によって生成されるウィジェットのIDナンバーの数値が減ることもありません。JavaScriptの変数名に使用してみる上記のIDナンバーの特徴を元にして、JavaScriptでIDナンバーを使用してみます。いった感じで、JavaScriptのグローバル変数にウィジェットのIDナンバーを取得できます。]」がIDナンバーになります。最初はウィジェット配置した時の処理から分からなかったもんですから、結構苦労してしまいました。楽な取得方法があるなら、教えて欲しいです。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検索ホーム上ウィジェット。