WPワークスホームブログワードプレスのカスタマイズ情報などを紹介しています。チュートリアルカスタマイズワードプレスのセットアップ方法ワードプレス初心者向けです。ドメインの取得とセットアップ必要なサーバー環境のセットアップワードプレスのインストール手順ワードプレスで最初に行うべき設定おすすめのプラグインテーマ「Ace」の特徴当サイトでも使用している自作テーマです。専用プラグイン「Ace+」カスタム投稿タイプページ編集に役立つコンテンツを管理します。CTAを作成してストックできます。表示位置は投稿ページや固定ページにて設定可。ブロックエディタを使って任意のスライダーを作成可能です。作成したスライダーはコンテンツやウィジェットで使用できます。所謂テンプレートです。ウィジェットでも引用する事ができますので、これらの組み合わせによりページの編集が自由自在に。カスタムウィジェットプラグイン「Ace+」に付随するオリジナルウィジェットです。投稿一覧を任意の場所に配置します。投稿ページにて投稿者の紹介をします。キーワード入力するだけでマップを表示します。ページの見出しを拾って目次を生成します。クリックすると見出しの位置までスクロール。SNSシェアアイコンを設置します。マウスでホバーさせるとアイコンがちょっと浮きます。作成したスライダーを表示します。ブロックエディタで簡単に編集できます。あらゆる投稿タイプのコンテンツをウィジェットエリアに出力します。これでフッターも自由にカスタマイズ編集可。カスタムブロックプラグイン「Ace+」により有効化されるオリジナルブロックです。カスタムナビメニューサムネイル付きのスライドメニューなど、オプションが用意されています。カスタムフォント「Googleフォント」+「フォントファイルのアップロード」カスタムCSSCSSファイルを追加できます。ウィジェットウィジェットウィジェットアイテムは、マウスでカチカチと操作するだけで簡単に配置できるアイテムですので、テーマやプラグインに実装することで、任意のウィジェットエリアに自由に配置することが出来ます。テンプレートファイルに直接HTMLを書くよりは柔軟に表示を切り替えられ、非常に便利ですよね。自分好みのウィジェットアイテムを作成できたら良いなと思ったことがあるなら、ちょっと下に紹介していますので一度挑戦してみてください。必要最低限の入力で作成できるコードも紹介しています。Contents必要なもの一般的なウィジェットアイテムに必要な作業は「WP_Widget」クラスを継承するクラスの作成です。PHP言語の「クラスの継承」がある程度分かれば良いのですが、簡単に説明すると、ワードプレスに用意されたウィジェットを作成するクラス「WP_Widget」のメソッド(クラス内に書いた関数のこと)を上書きすることで、ウィジェットを作成します。言ってみれば、クラス「WP_Widget」はウィジェット作成キットです。);という形でフックさせておくだけで、ウィジェットアイテムとして登録されます。入力する場所は「functions.php」内です。ウィジェットアイテムの作成・追加方法ウィジェットの作成には、クラス「WP_Widget」に用意された4つのメソッドを主に使用します。コンストラクタ親クラス「WP_Widget」のコンストラクタを呼び出します。公開ページで出力するメソッド設置したウィジェットエリアで呼び出されます。設定を保存するメソッド設定フォームに用意された保存ボタンによる処理の詳細を設定できます。設定フォームを出力するメソッドウィジェットに必要な設定フォームとして出力します。上のメソッドを使って、テキストを出力するウィジェットを作成してみます。/></p><?php}}?></pre>上の例は、設定項目はタイトルだけで、どこにも使いようのないウィジェットですが、基本的な形はこれです。設定フォーム内ではいくつも設定は追加できますので、出力したいものを設定できるように必要なinputタグを出力しておきましょう。)」とすることで、「$instance」に設定したデータを持たせることが出来ます。設定を保存するメソッド「update」内は、古いデータ(上の例では「$old_instance」)も取得できますので、単純に全てのデータを新しく更新する以外に、柔軟に設定を保存することが出来ます。さいごに一応オリジナルのテキストウィジェットの作成方法をコードと一緒に紹介しているページもありますので、興味がある場合は参考にしてみてください。条件分岐できる便利なカスタムテキストウィジェットの作り方このテーマに実装されているウィジェットアイテムの1つです。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ワークスダウンロードコンテンツやワードプレスのカスタマイズ方法を配信中。ホーム上ウィジェット。