WPワークスホームブログワードプレスのカスタマイズ情報などを紹介しています。チュートリアルカスタマイズワードプレスのセットアップ方法ワードプレス初心者向けです。ドメインの取得とセットアップ必要なサーバー環境のセットアップワードプレスのインストール手順ワードプレスで最初に行うべき設定おすすめのプラグインテーマ「Ace」の特徴当サイトでも使用している自作テーマです。専用プラグイン「Ace+」カスタム投稿タイプページ編集に役立つコンテンツを管理します。CTAを作成してストックできます。表示位置は投稿ページや固定ページにて設定可。ブロックエディタを使って任意のスライダーを作成可能です。作成したスライダーはコンテンツやウィジェットで使用できます。所謂テンプレートです。ウィジェットでも引用する事ができますので、これらの組み合わせによりページの編集が自由自在に。カスタムウィジェットプラグイン「Ace+」に付随するオリジナルウィジェットです。投稿一覧を任意の場所に配置します。投稿ページにて投稿者の紹介をします。キーワード入力するだけでマップを表示します。ページの見出しを拾って目次を生成します。クリックすると見出しの位置までスクロール。SNSシェアアイコンを設置します。マウスでホバーさせるとアイコンがちょっと浮きます。作成したスライダーを表示します。ブロックエディタで簡単に編集できます。あらゆる投稿タイプのコンテンツをウィジェットエリアに出力します。これでフッターも自由にカスタマイズ編集可。カスタムブロックプラグイン「Ace+」により有効化されるオリジナルブロックです。カスタムナビメニューサムネイル付きのスライドメニューなど、オプションが用意されています。カスタムフォント「Googleフォント」+「フォントファイルのアップロード」カスタムCSSCSSファイルを追加できます。SSL当サイトでSSL設定を行いましたので、簡単な設定手順を簡単に紹介します。ワードプレスのプラグインを有効化するだけでほぼ完了してしまう手順ですので、紹介するって程のことでもありませんが、SSL設定の方法が分からず悩んでいるのであれば、是非オススメします。僕なんていちいち設定変更するのが面倒だからプラグインを導入したくらいです。SSL」というマウス操作(クリック)のみで非常に簡単なプラグインが無料で公式リポジトリからインストールできます。ドメインまずはSSL設定を有効にする必要がありますので、ご利用のサーバーで設定を行う必要があります。」を利用していますので、無料でそのまま「独自SSL設定」という項目があり、クリックするだけでSSL化出来てしまいますが、これはご利用のサーバーによって方法が異なったり、レンタルサーバーによっては有料の場合もあるようですので、サーバー環境やそのサービスをまずはご確認ください。ええ、サーバーパネルの設定項目ドメインの4つ目です。SSL設定したいドメインを選択して、「独自SSL設定の追加」というタブがありますので、クリックして設定するだけです。簡単な作業で済みますが、必ず確認してください。ブラウザ上で「http://ドメイン」というようにURLに置き換えてアクセスしてみて、ちゃんと正常にアクセス出来る状態になっているかを確認しておく必要があります。ブラウザでは「https://ドメイン」というように、URL欄の最初の「https」が緑色になると思います。ChromeではURLの手前に緑色の鍵マークが付きます。SSL」のインストール・有効化SSL設定が反映されたのを確認した後、次はウェブサイトの設定がいくつか必要になります。「http://」のURLへのアクセスを「https://」のURLへのアクセスにリダイレクト内部リンクのURLを「https://」に編集SSL設定されているリソースのみにと言った感じです。ワードプレスの管理画面から、「プラグイン」->「新規追加」をクリックし、リポジトリからプラグイン検索するなどしてインストール・有効化を行います。有効化した後に再度注意点などの通知が管理画面の上に表示されますので、問題なければ有効化してしまいましょう。リソースなどをセキュアに設定するように求められますが、これは後でも修正できると思います。赤い通知が表示されている場合は事前にチェックして修正しておきましょう。SSLこんな感じで頭に追記されます。このプラグインを1つ入れておくだけでほぼ全てのSSL設定が完了してしまいます。自分で手作業した方が確認作業の意味もありベターなんでしょうけど、手間暇をクリック1つで片付けてしまえるので、僕みたいな面倒くさがり屋にオススメです。Regex」を使えば、「http://your-domain.com」を「https://your-domain.com」に変換してやれば一気に完了します。ブラウザの開発ツールでも読まれるコンテンツ(リソース)に不備があれば、コンソールなどに出力されると思いますし、ブラウザにもよりますがURLの左のアイコンをクリックすれば、ある程度チェックできますので、それらを参考にしながら細かい修正を行っていきます。テキストウィジェットで出力しているものなどは、手作業での修正になりそうですので、こればっかりは面倒ですが地道に修正していってください。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検索ホーム上ウィジェット。