参照ページが少ないだけでそれほど難しくない。WPワークスホームブログワードプレスのカスタマイズ情報などを紹介しています。チュートリアルカスタマイズワードプレスのセットアップ方法ワードプレス初心者向けです。ドメインの取得とセットアップ必要なサーバー環境のセットアップワードプレスのインストール手順ワードプレスで最初に行うべき設定おすすめのプラグインテーマ「Ace」の特徴当サイトでも使用している自作テーマです。専用プラグイン「Ace+」カスタム投稿タイプページ編集に役立つコンテンツを管理します。CTAを作成してストックできます。表示位置は投稿ページや固定ページにて設定可。ブロックエディタを使って任意のスライダーを作成可能です。作成したスライダーはコンテンツやウィジェットで使用できます。所謂テンプレートです。ウィジェットでも引用する事ができますので、これらの組み合わせによりページの編集が自由自在に。カスタムウィジェットプラグイン「Ace+」に付随するオリジナルウィジェットです。投稿一覧を任意の場所に配置します。投稿ページにて投稿者の紹介をします。キーワード入力するだけでマップを表示します。ページの見出しを拾って目次を生成します。クリックすると見出しの位置までスクロール。SNSシェアアイコンを設置します。マウスでホバーさせるとアイコンがちょっと浮きます。作成したスライダーを表示します。ブロックエディタで簡単に編集できます。あらゆる投稿タイプのコンテンツをウィジェットエリアに出力します。これでフッターも自由にカスタマイズ編集可。カスタムブロックプラグイン「Ace+」により有効化されるオリジナルブロックです。カスタムナビメニューサムネイル付きのスライドメニューなど、オプションが用意されています。カスタムフォント「Googleフォント」+「フォントファイルのアップロード」カスタムCSSCSSファイルを追加できます。参照ページが少ないだけでそれほど難しくない。参照ページが少ないだけでそれほど難しくない。Walker,ナビメニュー,編集方法ナビメニューって大体ドロップダウン式で並んでいて、親アイテムをホバーしたりクリックしたりすると、子アイテムが表示されるようになっていますよね。テーマ「ShapeShifter」でもそういった初歩的なドロップダウン式のメニューを使用しているんですが、凝ったデザインだとナビメニューに説明を加えられていたり、サムネイルも同時に出力したポップアップだったり、と結構通常の出力とは異なったものを出力しています。最近テーマ「ShapeShifter」でもちょっと凝ったものを作れるように、というよりはカスタマイズ出来るようにしようと思い、ナビメニューに着手し始めています。今までしていなかったのは、僕がCSSだけでドロップダウンメニューをデザインするのが苦手だったからですが、まぁワードプレスのコードを使ってHTMLを編集するくらいは案外簡単にできてしまうんです。ナビメニューは参照ページが少ないのか、あまりカスタマイズの方法が載っているページが見つからない気がしますので、ちょっと簡単に設定項目の追加・保存、また出力するナビメニューの編集方法について紹介してみようと思います。ContentsWalkerクラスについてナビメニューの編集にはワードプレスに用意されているクラス「Walker」が付き纏いますので、簡単な解説を先にしておきます。知っていると簡単に理解できると思いますし、知らない人は「階層有りのアイテムのHTMLを出力するクラス」だったり、「アイテム毎、階層毎に出力するラッパーなどを編集できるクラス」などと覚えておくと良いかもしれません。」後に「</li>」といった感じで出力されるような、メソッドが用意されています。これらのクラスを引き継いで、メソッドを編集することで簡単に編集でき、実はこれは管理画面の「メニュー」ページでも、公開側で使用される関数「wp_nav_menu」の引数でも使われています。このクラスの編集方法を知っていれば、階層を持つアイテムをカスタマイズすることが可能になりますので、覚えておいて損はないと思います。どのテーマにも使われていると思いますが、ナビメニューのHTMLを出力・取得することができる関数「wp_nav_menu」は、カスタマイズを試みたことがある人なら一度は触ったことがあると思います。大きく分けると2種類方法があります。Walkerクラスを作成して指定し直す方法とフィルターフックを使う方法です。フィルターフックの方が簡単そうに見えますが、フィルターフックもWalkerクラス内に用意されているものですから、先にWalkerクラスを編集する方法を紹介すると同時に、どの部分にフィルターがかけられているかを見ておくと編集しやすいので、Walkerクラスから紹介していきます。継承クラスの作成ただ、実際はナビメニューのIDを指定する以外に、ラッパーとなるHTML、クラス、出力の有無を指定したりできますが、引数となる連想配列のキー「walker」を指定することが出来ます。これは上記したWalkerクラスのことです。これを指定しない場合、デフォルトでワードプレスが用意している「Walker_Nav_Menu」というクラスが使われることになります。ええ、ですので、これを継承したクラスを作成し、部分的に編集してやれば、思い通りのナビメニューを作成することが可能になりますので、部分改造だけでも試みてください。「class/walker-nav-menu.php」など何でも構いませんので、PHPのファイルを作成してインクルードします。後は以下のようにコーディングします。"</li>\n";}}}?>長々と書いていますが、基本的には親クラス「Walker_Nav_Menu」をコピーしていますので殆ど編集はしていません。階層の最初と最後に「DIV」タグを追加して、各フィルターフック名に「shapeshifter_」とプレフィックスを付けた程度です。Walkerクラスごとメリットは、任意の箇所にフィルターを掛けることが出来ますし、階層やアイテム毎に細かい編集も可能ですから、HTMLを丸ごと一新できてしまうんですよ。ええ、各アイテムがページのIDも持っていますから、そこからメタデータやサムネイルを引っ張ってくることも可能なんです。あとは出力する際に以下のようにして「wp_nav_menu」を使うだけです。);?>意外と簡単だと思います。した工夫まぁ単純にウォーカークラスを指定するよりは、関数やメソッドでWalkerクラスのインスタンスを取得できるようにしておくと、テーマカスタマイザーなどの設定で、条件を付けて適用するWalkerクラスを切り替えることも可能です。複数のナビメニューを使用する場合などもそうで、デザインを変えたい場合はそれ毎にWalkerクラスを作成して引数に使用することで、自由自在にナビメニューを編集することが出来るんですよ。次はオプションで管理画面で設定項目の追加方法です。実はこれはちょっと厄介で、何故かアイテムのフォーム内にアクションフックが用意されていませんから、自分でアイテムを出力するWalkerクラスを用意する必要があります。ええ、さっき上で紹介したようなことをします。カスタムWalkerクラスを指定まず、最初の問題はどのようにして編集するかです。当たり前の話なんですが、ワードプレスにはウィジェットなりメタボックスなり、アクションフックやフィルターフックでフォームの後に出力することも結構簡単に出来るものが多いのですが、ナビメニューには現状(4.6.1)それがありません。コアのコードを見てみると、ナビメニューに使用するWalkerクラス名がフィルター適応されていますので、これを使ってWalkerクラス名を切り替えることが可能なんです。'Your_Custom_Walker';}こういう形でカスタムWalkerクラス名を指定することが出来ます。「メニュー」ページでアイテムの編集用設定フォームを編集するために使われる、ワードプレスが用意しているWalkerクラスが「Walker_Nav_Menu_Edit」というんですが、このクラスを継承して、オリジナルのカスタムWalkerクラスを作成したいのに、そのままやっても定義されていない事になっています。?実はこのクラスを定義しているファイルは、通常ワードプレスのページを読み込んだ際には読まれない様になっていて、AJAXで読まれる時にインクルードされるようになっているんですよ。「Walker_Nav_Menu_Edit」は「Walker_Nav_Menu」の継承クラスですので、そちらを継承して「Walker_Nav_Menu_Edit」のメソッドをコピペしてしまうのが楽だと思います。ob_get_clean();}}}何を追加したかというと、通常の設定フォームをコピペして、設定項目の最後にアクションフックを1つ追加しています。「your_nav_menu_item_edit」というやつです。あとはこれにフックさせてINPUTタグなどを出力させてやればOKです。}?>と言った感じで追加したい設定項目を追加すれば良いんじゃないでしょうか?データの保存データの保存にはアクションフック「wp_update_nav_menu_item」を使用します。受け取れるデータは「メニューID」「メニューアイテムのデータベースID」「その他のデータ(連想配列)」です。実は、というか知っているかもしれませんが、メニューは投稿タイプの1つですので、条件を付けて追加した設定項目のデータの保存を「update_post_meta」で行うだけです。);}めちゃ簡単に書きましたが、ノンスなどのチェックもしておいた方が良いかもしれません。最後にコードはあくまで参考用に書いたものですのでコードエラーが出るかもしれませんが、編集方法の概要は掴めたんじゃないでしょうか?ええ、メニューアイテムに追加したメタデータは出力する際も使えますので、これを使えばサムネイルではなく、メニューのアイテム用にイメージを個別に設定したり、アイコンを設定したり、様々なオプション機能を付け加えることが出来ます。テーマ「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検索ホーム上ウィジェット。