WPワークスホームブログワードプレスのカスタマイズ情報などを紹介しています。チュートリアルカスタマイズワードプレスのセットアップ方法ワードプレス初心者向けです。ドメインの取得とセットアップ必要なサーバー環境のセットアップワードプレスのインストール手順ワードプレスで最初に行うべき設定おすすめのプラグインテーマ「Ace」の特徴当サイトでも使用している自作テーマです。専用プラグイン「Ace+」カスタム投稿タイプページ編集に役立つコンテンツを管理します。CTAを作成してストックできます。表示位置は投稿ページや固定ページにて設定可。ブロックエディタを使って任意のスライダーを作成可能です。作成したスライダーはコンテンツやウィジェットで使用できます。所謂テンプレートです。ウィジェットでも引用する事ができますので、これらの組み合わせによりページの編集が自由自在に。カスタムウィジェットプラグイン「Ace+」に付随するオリジナルウィジェットです。投稿一覧を任意の場所に配置します。投稿ページにて投稿者の紹介をします。キーワード入力するだけでマップを表示します。ページの見出しを拾って目次を生成します。クリックすると見出しの位置までスクロール。SNSシェアアイコンを設置します。マウスでホバーさせるとアイコンがちょっと浮きます。作成したスライダーを表示します。ブロックエディタで簡単に編集できます。あらゆる投稿タイプのコンテンツをウィジェットエリアに出力します。これでフッターも自由にカスタマイズ編集可。カスタムブロックプラグイン「Ace+」により有効化されるオリジナルブロックです。カスタムナビメニューサムネイル付きのスライドメニューなど、オプションが用意されています。カスタムフォント「Googleフォント」+「フォントファイルのアップロード」カスタムCSSCSSファイルを追加できます。ShapeShifter,ウィジェット,テーマ,メタボックス,活用法バージョン1.0.17の更新を経て、ウィジェットエリアに配置したウィジェットアイテムを、メタボックスで設定することで自由にウィジェットエリア位置に出力することが出来るようになりました。「何故そんな訳の分からない機能を追加した?」と思うかもしれませんが、テーマ「ShapeShifter」にはコンテンツの編集ページのメタボックスで「ウィジェットエリア非アクティブ化設定」を設けていますので、これらを組み合わせることで、ウィジェットの出力を更に柔軟になったんです。「出力条件」によって出力されないウィジェットも、投稿メタボックスによる出力設定が優先され、しかもウィジェットエリアを指定して出力することが出来るんですよ。面白いことにウィジェットエリアは自由に追加できますが、出力しないウィジェットエリアも追加できますので、投稿メタでの出力用にウィジェットをストックすることが可能です。この下を見てみてください。Contents出力されない筈のウィジェットを引っ張ってくる使用例を2つ設置してみましたが、いかがでしたか?両方共通常この投稿ページには出力されないウィジェットですが、投稿メタボックスの設定によって、このページ限定で出力できています。実はこれで表示してみて気が付いたのですが、スライダーの出力例で、ダウンロードのテキストの色がコンテンツのテキスト色を採用してしまっていて非常に見えにくくなっていました。スライダーはこんな使い方するつもりではなかったので、気が付いていませんでした。ええ、その内修正しておきます。使い方は簡単なのですが、テーマ「ShapeShifter」ならではの活用法と一緒に紹介しておきます。機能の活用法まず、既にご利用いただいている方には分かると思いますが、テーマ「ShapeShifter」では「外観」->「テーマの設定」ページにおいてウィジェットエリアを好きなだけ追加することが可能です。出力位置を自由に選択することが可能だということも知っていると思います。ここで活用すべきはフック「カスタム」です。ええ、このフックは子テーマ用にと思って、敢えて標準的に出力されないフックです。これは投稿メタと組み合わせると、ウィジェットのストッカーとして活用することが出来るんですよ。投稿メタ出力用ウィジェットエリアまずはウィジェットエリアの追加です。「外観」->「テーマの設定」ページにてウィジェットエリアの追加をします。分かりやすいように名前だけはちゃんと付けておきましょう。出力サンプル用ウィジェット次は追加したウィジェットエリアにストックしたいウィジェットを配置します。使いまわせるウィジェットを設定保存しておくと便利なので、広告の他ダウンロードリンクなど、サイトのコンテンツに合ったものを用意しておくと良いと思います。僕は適当にテキストウィジェットを追加しましたが、別にテーマ「ShapeShifter」オリジナルウィジェットでなくても、プラグインによるウィジェットでも何でも良いです。気にしないでください。出力アイテムのタイプ最後にコンテンツの編集ページにあるメタボックスでの設定です。アイテムのタイプは「配置済みウィジェット」を選択します。分かりにくいテキストですが、「ウィジェットエリアに配置されているウィジェット」という意味でつけたつもりです。ウィジェットエリアの選択メニューをポップアップさせると、右のスクリーンショットのような設定項目が出てきますが、実はアイテムタイプ「配置済みウィジェット」のみ、「一般設定」と「背景イメージのセット」で保存した項目は無視されます。ええ、出力に全く反映されませんので、「ウィジェット選択」のみ設定すればOKです。「ウィジェットエリア」を選択すると、その下にそのウィジェットエリアに配置されているウィジェットアイテムのリストが選択できるようになります。そこで表示されているのは、ウィジェットアイテムの「ウィジェット名」と「タイトル」ですので、「ウィジェット」の設定項目でタイトルを入力していない場合は「ウィジェット名」のみで判断するようにしてください。注意点など気付いたこと実はこの機能は、一見すると保存したウィジェット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検索ホーム上ウィジェット。