WPワークスホームブログワードプレスのカスタマイズ情報などを紹介しています。チュートリアルカスタマイズワードプレスのセットアップ方法ワードプレス初心者向けです。ドメインの取得とセットアップ必要なサーバー環境のセットアップワードプレスのインストール手順ワードプレスで最初に行うべき設定おすすめのプラグインテーマ「Ace」の特徴当サイトでも使用している自作テーマです。専用プラグイン「Ace+」カスタム投稿タイプページ編集に役立つコンテンツを管理します。CTAを作成してストックできます。表示位置は投稿ページや固定ページにて設定可。ブロックエディタを使って任意のスライダーを作成可能です。作成したスライダーはコンテンツやウィジェットで使用できます。所謂テンプレートです。ウィジェットでも引用する事ができますので、これらの組み合わせによりページの編集が自由自在に。カスタムウィジェットプラグイン「Ace+」に付随するオリジナルウィジェットです。投稿一覧を任意の場所に配置します。投稿ページにて投稿者の紹介をします。キーワード入力するだけでマップを表示します。ページの見出しを拾って目次を生成します。クリックすると見出しの位置までスクロール。SNSシェアアイコンを設置します。マウスでホバーさせるとアイコンがちょっと浮きます。作成したスライダーを表示します。ブロックエディタで簡単に編集できます。あらゆる投稿タイプのコンテンツをウィジェットエリアに出力します。これでフッターも自由にカスタマイズ編集可。カスタムブロックプラグイン「Ace+」により有効化されるオリジナルブロックです。カスタムナビメニューサムネイル付きのスライドメニューなど、オプションが用意されています。カスタムフォント「Googleフォント」+「フォントファイルのアップロード」カスタムCSSCSSファイルを追加できます。ウィジェットまだ管理者によるレビューが始まってもいないので、リポジトリの利用がまだなんですが、テーマ「ShapeShifter」で使用していた投稿メタによるウィジェットエリアへの出力に、登録されているウィジェットを新たに設定して出力する機能を付けました。ええ、まだ配布していないバージョンの話です。標準的に備わっているウィジェットの設定画面でなくても、ウィジェットの出力は可能ですので、ページ毎にウィジェットの出力を設定できればと思いました。実装する予定の機能でしたが、レビューと重なったりで遅れてしまっていました。外観に影響する機能ですので、リポジトリ利用のテーマのルールには引っかからないと思いますので、出来れば管理者レビュー時についでにチェックしてみたいんですけどね。ウィジェットの出力は公開しているページで行われるものですので、何かしら投稿タイプのページの1つで出力されると想定していますので、その一例として投稿メタによる出力を紹介しますが、応用の利く方法ですので、他にも使えると思いますよ。オブジェクト」という形で全てのウィジェットのオブジェクトが取得されています。$wp_widget_factory;」で、登録されている全てのウィジェットのメンバ変数やメソッド使用することが可能になります。出力に必要なデータを揃える公開側のページで出力するのに必要なデータが幾つかありますが、「外観」->「ウィジェット」で設定する者以外にも必要な事項があります。先に書いておきますが、ここでは投稿メタを一応想定して解説しますが、別にワードプレスのオプションに設定することを想定しても、必要なデータは同じですので、使いたい条件に合わせてください。必要なデータは以下の通りです。「WP_Widget」を継承するウィジェットのクラス名です。ウィジェットの設定値を所有する連想配列ウィジェットがテキストウィジェットであれば出力するテキストなど、保存されたデータを所有する連想配列です。出力されるウィジェットの前後、タイトルの前後に出力されるべきHTMLです。「before_widget」「after_widget」「before_title」「after_title」というキーに、それぞれに必要なHTMLを与えます。これらはどれもワードプレス関数「the_widget」で使用されるべき引数となります。最後の項目は、出力する位置によりますので、設定ページを一緒にしてしまう必要もありません。都合の良いように書いてください。面倒な部分はウィジェットの設定フォームとその保存方法ですが、それも既に用意されているものを使用しますので、特別難しいこともありません。投稿メタを想定すると、編集ページにメタボックスを追加して、その中にコーディングしていくところからコーディングしていきます。メタボックスの追加方法は「コンテンツページにおけるカスタムフィールド・メタボックス実装と使用方法を紹介」をご参考にしてください。後は前述したグローバル変数「$wp_widget_factory」を使用して、各ウィジェットのフォームを出力できるようにします。ループで全てのウィジェットのフォームを出力する場合、以下のようになります。);}まぁフォームがこのように全て出力されると非常に鬱陶しいので、DIVタグなどでラッパーをかけて、条件付きで表示・非表示を切り替えるようにする方がいいです。僕はその前にSELECTタグを置いてウィジェットを選択できるようにし、JavaScriptで表示するフォームを変更できるようにしています。ウィジェットのオブジェクトには親クラス「WP_Widget」で用意されている共通のメンバ変数がいくつかあります。id_base小文字でクラス名を使っている、フォームの属性「id」や「name」の値に使用されるStringnumberウィジェットに与える数値です。「外観」「ウィジェット」では自動加算されていますが、自分で設定する場合は値を変更して使用します。intで初期値は「1」です。nameウィジェットの名前で、ウィジェットの選択時に表示されているものです。翻訳可能テキストですので、ユーザーに寄って表示される言語が異なります。$widget_number;」のようにして値を変更したりできます。メソッド「form」で出力されるフォームのname属性値フォームを送信するので、それを取得するのに名前が分かっていないと保存できません。「name」の値は以下の通りです。']';?>ウィジェットのフォーム内では、一般的にname属性値もid属性値もウィジェットのメソッドによって最後の「$input_id」以外は生成されるようになっていますので、「$_POST」とウィジェットのナンバーまでを使って取得できるようにします。クラス名も忘れずに設定したいウィジェットのクラス名を一緒にフォーム送信するのを忘れないようにします。上の例での場合、ループ中にinputタグを出力してしまいます。「$class」はクラス名です。'">';?>この場合、ウィジェットのメソッドで出力されるフォームとナンバーまで同じname属性値を使用しており、「widget_class_name」というキーでクラス名を拾えるようにしています。]」で指定したウィジェットの設定値のみを拾えるんですよ。汎用的にこなすにはちょっと難しい問題が1つ残っています。実は設定項目用にJavaScriptを使って何かをポップアップさせるなどするフォームの場合、JavaScriptが上手く機能しない可能性も考えられます。僕が現在修正中の項目なんですが、配布は改善してからにしますし、その前にレビュー時にチェックしてもらおうと思っている項目でもありますので、恐らく大丈夫だと思います。僕の場合、簡易的に作ったポップアップフォームを作って使用していたせいで、上手くポップアップできなかっただけなんですが、まぁ複雑なフォームを使用しているウィジェットがある場合は、もしかすると何かしらの不具合が起こるかもしれません。送信した設定値を取得・保存する上のようにして出力したフォームからデータを保存する仕組みを作ります。投稿メタの場合だと、ページが保存される時に投稿メタの設定値も保存されるべきでしょうから、アクションフック「save_post」で設定を保存する関数をコールするようにします。あとは非常に簡単です。}}まぁノンスチェックもすっ飛ばしていますし、僕が実際に使っているものは、SELECTタグで「id_base」の値を取得できるようにし、それを条件にして指定ウィジェットのチェックをしていますので、自分が書いているものとはだいぶ異なるんですが、大体はこんな感じです。アクションフック「save_post」を使用していれば「$post_id」は受け取ることが出来ます。設置したウィジェットを出力するあとは保存した値を使って関数「the_widget」をコールするだけです。));?>これで呼び出したところでちゃんとウィジェットで出力できていれば問題無いでしょう。補足などテーマ「ShapeShifter」では、ウィジェット前のHTMLなどウィジェットエリアのデータも取得できてしまいますので、投稿メタでウィジェットエリアに出力することが出来るようになっています。方法はウィジェットを登録した際の連想配列をそのまま使用する他、オプションに保存しておくなど多々ありますが、テーマ「ShapeShifter」は標準的なウィジェットエリアとオプショナルのウィジェットエリアに分けています。テーマ「ShapeShifter」で使用される予定のソースコードは、リポジトリが利用できるようになるまでは公開されませんが、テーマでダメな場合はプラグインに入れて無料で公開する予定です。最後に一応、ざっくりした解説用に書いたコードばかりですので、実際に使用する場合は、ちゃんと用途に合わせてコードを書けば大丈夫です。使う機会も少ないと思いますけどね。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検索ホーム上ウィジェット。