Inspiration.
That’s my goal for you.それは、あなたのための私の目標です。
多くの WP ユーザーは、WordPress がどれほど強力であるかをまだ理解していません。この投稿を、WordPress Web サイトをカスタマイズするための新しいツールや戦術を発見するためのインスピレーションの源にしてください。
読み終わるころには、より美しく、完全にブランディングされた Web サイトになっていることでしょう。
それでは、最大のカスタマイズ戦術を始めましょう…
- 新しいテーマを選ぶ
- Switch to a static homepage
- Create a custom homepage
- フォントを変更する
- ページあたりの投稿数を変更する
- Enable infinite scroll
- Use consistent Featured Images
- すべての記事にカスタム抜粋を書く
- Customize how your site looks on Facebook
- ソーシャル アイコンを追加する
- ソーシャル共有ボタンの追加
- コンタクトフォームの追加
- Create a custom menu
- メニューを「スティッキー」にする
- Customize your colors
- 背景画像を追加する
- ブランド化されたログインページを作成する
- WP 管理画面をカスタマイズする
- 表示名を更新する
- カスタム アバターを表示する
- Add an author box
- Add an “About Me” widget
- ウィジェットを表示するページを制御する
- Add category descriptions
- Customize the footer text
- Customize the emails WordPress sent
- 404 ページのカスタマイズ
- Master the HTML widget
- まとめ
新しいテーマを選ぶ
サイトを劇的に変化させる最も手っ取り早い方法は、WordPress のテーマを変更することです。
テーマを変更すると、サイトのデザインに関するすべてが即座に変化します。
しかし、問題があります…
選択できる WordPress テーマは 10,000 以上あります！
テーマを閲覧しレビューするのに何日もかけるのは簡単でしょう。 実際、多くの人がそうしています!
毎週、「私のテーマを選ぶ前に何百ものテーマを見てきた」というメールが届きます。
時間を節約したい場合は、あなたのサイトにぴったりのテーマを選択する方法について、私のガイドに従ってみてください。
もちろん、新しいデザインをすぐに試したい場合は、WP ダッシュボードから直接プレビューできる無料の WordPress テーマを 19 個用意しています。
次に、サイトのデザインを大きく変える簡単な方法は、トップページを最新の投稿から静的なページに切り替えることです。
Switch to a static homepage
ここで、インサイダーのヒントを紹介します。 実際、ブロガーならなおさらです！
最新の投稿をリストする以上のことを行えば、より多くの購読者を獲得し、より多くのお金を稼ぐことができます。
たとえば、ホームページには購読者を増やすためのメール オプトイン フォームを含め、最新の投稿を表示するだけではなく、ベスト投稿をいくつか宣伝することができます。 この設定を静的ページに切り替えるだけです。
Create a custom homepage
Elementor を使用して、カスタム ホームページをデザインできます。
Elementor はページ ビルダー プラグインで、「ページ ビルダー」の部分が示すように、完全にカスタム ページを作成するために使用することができます。
この詳細なビデオ チュートリアルでは、Elementor の使用方法を説明します。
Subscribe to Compete Themes on Youtube
始めるには、プラグイン メニューで検索するか、Wordpress.NET からダウンロードし、サイトに Elementor をインストールすることができます。
サイトに Elementor をインストールしたら、任意のページにアクセスして「Elementor で編集」ボタンをクリックすると、エディターを起動することができます。
このインターフェースが表示されます。
画面の左側には、利用できる各種ウィジェットがあり、ページ コンテンツ エリアにドラッグアンドドロップすることができます。
Gutenberg にも同様のブロックがありますが、Elementor のウィジェットはよりカスタマイズしやすくなっています。
Elementor has completed sales pages that you can insert into your pagge just one click.
You can see the pre-built homepage, insert your favorite, and swap out the text and images for the perfect fit.Elementor has an stylish pre-made blocks that can drop into any page.Elementor は、より簡単に物事を進めるために、あらゆるページにドロップすることが可能な、スタイリッシュな既製のブロックを持っています。
無料の販売ページもかなりありますが、最高のもののほとんどは Elementor Pro でしか利用できません。
つまり、これがどのように機能するかをまとめると…
サイトのページの大部分はテーマに依存しますが、ホームページのように完全にカスタム ページが必要になったとき、これは Elementor を使う素晴らしいタイミングと言えます。 実際、テーマ開発者である私も、自分でコーディングする代わりに、Elementor でページを作成するようになりました。
フォントを変更する
選択したフォントは、サイトの性格に大きな影響を与えます。
さて、これを読んでいるということは、あなたのテーマにはカスタム フォントがないのだと思いますが、簡単で無料の解決策があります。
このプラグインにより、Web の事実上のフォント ソースである Google Fonts ライブラリに完全にアクセスできます。
私は自分のテーマのすべてで Google Fonts を使用していますが、他のものを使用するテーマ開発者を知りません。
Google Fonts Typography プラグインをインストールすると、カスタマイザーに新しいパネルが表示され、サイト全体のフォントをすばやく切り替えられるようになります。
ステップバイステップの手順を知りたい場合は、Google Fonts Typography でフォントを変更する詳しいビデオ チュートリアルをご覧ください。
さて、ここでサイトの表示を微調整するためのもうひとつの簡単な方法を紹介します。
ページあたりの投稿数を変更する
デフォルトでは、WordPress はメイン ブログ ページとアーカイブ（カテゴリ、タグ、著者、日付アーカイブ）に 10 件の投稿を表示します。
10 件は良いデフォルトですが、Challenger Pro のレイアウトのような複数列のレイアウトの場合はどうでしょうか。
訪問者は 1 回のスワイプで 10 件すべての投稿をスクロールして通過します。
Reading Settings メニュー (Settings > Reading) にアクセスし、この設定で 1 ページあたりの投稿数をすばやく変更できます。
誰かがあなたの投稿の最後に到達したら、ページネーションをクリックして続きを探すことができますが、単純なページネーションよりも優れた別のカスタマイズがあります。
Enable infinite scroll
Be honest.
How often do you actually click the pagination links at the bottom of a blog?
I do sometimes but all I ever click the link to the next page of posts.
無限スクロールは、訪問者がページをスクロールし、スクロール中に記事を自動で読み込むことを可能にします。 これはいくつかのサイトではうまく機能しますが、よりうまく機能する傾向のある若干の微調整があります。
訪問者は、ボタンをクリックすると、ページ全体を再読み込みすることなく自動的に投稿を読み込むことができます。
コード不要のソリューションが必要な場合は、Jetpack に含まれる無限スクロールの機能があります。 すべてのテーマが対応しているわけではありませんが、当社の 19 のテーマはすべて Jetpack で動作します。
無限スクロールにより、訪問者はより多くの記事を読み、サイトでの滞在時間が長くなります。
Use consistent Featured Images
Featured Imagesを使用していますね？
同じページにいることを確認するために、どの投稿またはページのサイドバーでもこのオプションを使用して、注目の画像を追加できます:
そして、画像はこのようにブログと投稿ページに表示されます。
Featured Images will help each post get more attention and more clicks which means more readers and subscribers.The featureed images will help each post get attention and more clicks.
しかし、それだけではありません。
一部の WordPress ユーザーは、注目の画像を選択する際に一度に 1 つの投稿しか考えず、ブログがばらばらに見えてしまいます。
注目画像を選ぶときは、一貫した外観を保つようにします。
たとえば、私は通常、Compete Themes ブログの注目画像はベクター アートにこだわっています。
あなたのサイトの注目画像に一貫した美学を選ぶと、より美しいデザインになります。 また、画像の上に投稿タイトルを追加できるCanvaもお勧めです。
あなたのブログをさらに魅力的にしたいのであれば、次のヒントに従ってください。
すべての記事にカスタム抜粋を書く
カスタム抜粋を書く人がいかに少ないことか信じられません!
エディタの右サイドバーに、このような抜粋ボックスがあります。
よくコーディングされたテーマを使用している限り、そこに書いた抜粋はメイン ブログ ページとアーカイブに表示されます。
各記事にカスタム抜粋を記述する理由は 2 つあります。 あなたはちょうど最初の 25 の単語をつかむあなたの投稿のためのより魅力的なティーザーを書くことができると思いませんか？
次に、カスタム抜粋を作成するときに、抜粋がデザインにうまく適合していることを確認することができます。 デフォルトの長さが長すぎたり短すぎたりする場合は、手動で抜粋を書くとその問題が解決します。
さらに、この次のカスタマイズ戦術に従えば、ソーシャルメディア上でのサイトのパフォーマンスも良くなります。
Customize how your site looks on Facebook
If you followed my last two tips, you’re gonna love the way your posts when shared on Twitter and Facebook.
But!
You need to add “Open Graph” tags to your site. 最も簡単な方法は、Yoast SEO プラグインをインストールすることです。
Yoast SEO は、Google でより良いランクにサイトを最適化するつもりだそうです。 この記事は検索エンジン最適化ではなくウェブデザインについてなので、あまり脱線したくはありません。
Yoast SEO が行うその他のことは、サイトに Open Graph タグを追加することです😁
Open Graph タグはサイトの各ページのソース コードに表示され、誰かがあなたのサイトを共有するときに使用するコンテンツを Facebook などのソーシャルメディア サイトに知らせます。
注目の画像を追加し、カスタム抜粋を記述すると、その投稿が共有されたときに Facebook が表示するコンテンツとなりますが、これはオープン グラフ タグを追加した場合のみです。
Yoast SEO では、Facebook や Twitter 用に別の画像を追加するオプションも用意しています。
注目の画像には普通の写真を使用し、Facebook で投稿を共有するときだけ、タイトルをオーバーレイ表示した別のバージョンを用意することができます。
ソーシャル アイコンを追加する
この WordPress カスタマイズは非常にシンプルです。
最近のほとんどのテーマにはソーシャル アイコンが組み込まれており、たとえば Mission News テーマには 50 以上のソーシャル メディア サイトのアイコンが含まれています。 これは、人々が好きなプラットフォームであなたをフォローするための素晴らしい方法です。
サイトのヘッダーやフッターにソーシャル アイコンを追加することは、視聴者を構築するために素晴らしいですが、ソーシャル共有ボタンの追加も検討してください。
ソーシャル共有ボタンの追加
私はあなたを混乱したくないので、これを明確にさせてください。 これらは単なるリンクです。
ソーシャル共有ボタンは、次のように投稿に追加する必要があります。
たくさんのプラグインがありますが、私のお気に入りは Scriptless Social Sharing です。
ほとんどの共有ボタン プラグインの問題は、サイトの速度が極端に低下することです。 また、「Scriptless Social Sharing」は、必要な機能のみを搭載しており、それ以上の機能はありません。
新しいトラフィックをすべて取得すると、あなたのサイトをより収益性の高いものにするために、さらにいくつかのカスタマイズを行うことができます。
コンタクトフォームの追加
あなたのサイトでサービスを販売している場合、顧客が連絡を取得できるようにフォームを追加することは当然です。
コンタクトフォームを追加することに関しては、WPForms は私のお気に入りのプラグインです。 また、WPForms は、その優れた機能性から、多くの人に利用されています。
WordPress にコンタクトフォームを追加する方法に関する私のガイドは、すべてのステップを説明します。 言い換えれば、新しいトラフィックをここに送って、購読者や顧客に変換するのです。
サイトへのトラフィック誘導に成功している場合は、ランディング ページにオファーを掲載し、そこに訪問者を送る時です。
ランディングページの1つのトリックは、すべてのナビゲーションを削除するか、そのページ上のナビゲーションを制限することです。 これを行うには、カスタム メニューを作成する方法を知る必要があります。
どのテーマを選択するかによりますが、あなたのサイトはおそらくメイン メニューのすべての「ページ」を出力することになるでしょう。
メニュー用のカスタム リンクのセットを作成し、潜在的には、サイト上のさまざまなページに表示するいくつかのメニューを作成したいと思うでしょう。 また、並べ替えやドロップダウンメニューの作成も簡単にできます。
次のカスタマイズを追加して、サイトをさらに見やすくします。
メニューを「スティッキー」にする
今までにこの記事をかなりスクロールしてきましたが、画面の上部を見ると、主要メニューはまだ見えていますね。
メニューを常に画面上部に固定しておくと、訪問者が新しいページに移動するたびにスクロールして戻る必要がないため、サイトのナビゲーションが非常に簡単になります。
ナビゲーションをスティッキーにする簡単な方法は 2 つあります (ご使用のテーマにこのオプションがない場合)。
まず、無料の Sticky Menu on Scroll プラグインをインストールします。 私たちのすべてのテーマについて、ヘッダー全体または主要なメニューだけをスティッキーにしたい場合に応じて、#site-header または #menu-primary-items のいずれかを使用できます。 この方法では、CSS セレクタを使用する必要はなく、メニューのデザインを完全にカスタマイズできます。
あなたのサイトをさらに簡単にナビゲートするためのヒントがもう 1 つあります。
Web デザイナーは、Amazon のこの例のように、ヘッダーの下に時々追加されるリンクのトレイルに対して、この同じ用語を採用しました。
あなたの Web サイトは間違いなく Amazon よりも小規模で複雑ではありませんが、それでもパンくずの使用から恩恵を受ける可能性が高いでしょう。 このオプションをクリックして、設定メニューからオンにします。
当社のテーマはすべて Yoast のパンくずリストに対応していますが、パンくずがサイトに表示されない場合は、テーマ開発者に確認する必要があるかもしれません。
以上のいくつかのヒントにより、ナビゲーションに対する最も重要なカスタマイズをすべて行うことができました。
Customize your colors
This is a simple and perhaps obvious step to brand your website.
Change the accent color throughout your site will create a consistent visual effect.
The theme includes custom colors and how to customize your site with code, then me introduce you to an amazing tool: CSS Hero。
ここで、少し背景を説明しますと、
CSS とは、Web デザイナーが Web ページのスタイル付けに使用するコーディング言語の名前です。 CSS Hero は WordPress プラグインで、CSS を 1 行も記述せずにテーマをカスタマイズできます。
たとえば、CSS Hero を使用して、サイトの背景色を簡単に変更できます。
次に、背景をクリックすると、左側のサイドバーにカスタマイズ オプションのセットが表示されます。
CSS Hero を使用して、サイト上のあらゆる要素の色、およびフォント、間隔、その他のデザイン面の負荷を変更できます。
CSS Hero を試す →
この次のカスタマイズ手法は、すべてのプロのウェブサイトにとって必須のものです。 私がこれまで見てきたすべてのテーマには、このための簡単なオプションが含まれています。
しかし、そこで止まってはいけません!
また、次のように、ブラウザのタブ自体にもロゴを追加します。
この小さなアイコンは通常ファビコンと呼ばれていますが、WordPress インターフェイスでは「サイト アイコン」と呼ばれています。
カスタマイザーで、サイト アイデンティティ セクションを開き、一番下にサイト アイコン オプションを見つけます。
あとは、コンピュータからロゴ画像をアップロードして、公開ボタンを押すだけです。 Compete Themes では、ペンと盾のアイコンを使用していますが、それがない場合は、単にロゴを青い四角に白いテキストで「CT」とします。
また、WordPress が画像のサイズを 512x512px と推奨していることに驚かれるかもしれませんが、これは間違いです。
ブラウザのタブに表示されるアイコン以外にも、ファビコンはブックマークで再利用され、より大きく表示される可能性があります。 たとえば、iPad Pro を使用している人は、あなたのサイトを Safari のホーム画面に保存し、アイコンがかなり大きく表示されるかもしれません。
WordPress にファビコンを追加する方法については、詳しいガイダンス（ビデオチュートリアルもあります）を参照してください。
背景画像を追加する
背景画像はあまり見かけなくなりました。
最近では、ほとんどの Web サイトが、白または薄いグレーの無地の背景に固執しています。
背景を選択しますが、色を設定する代わりに、画像オプションを選択します。
欲しい画像をアップロードしたり、Unsplash から直接画像を読み込むこともできます。
次に、ブランディングを次のレベルに引き上げましょう。
ブランド化されたログインページを作成する
サイトにログインするメンバーがいる場合、ブランド化されたログインページの作成は必須です。
私は Compete Themes のログイン画面をブランド化し、素晴らしいものにしました。
同じ手順を踏んでみたいという方は、WP Newsify にそれについての記事を書きました。
もしあなたがずっと従ってきたなら、あなたのサイトとログイン画面は完全にブランド化されていますが、そこで止める理由はありません!
WordPress サイトのカスタマイズをさらに進めるために、ブランディングをサイトのダッシュボードに取り入れましょう。
WP 管理画面をカスタマイズする
まず最初に、ご存知ないかもしれませんが、プロファイル メニューから管理画面のカラー パレットを変更することができます。 管理インターフェイスを完全に制御するには、WP Custom Admin Interface プラグインをチェックしてください。 たとえば、プロファイルメニューから選択できる新しいカラーパレットを作成できます。
また、メニュー項目の名前や順序の変更、メニューの非表示、完全にカスタマイズした新しいメニュー項目の追加も可能です。
もしあなたが管理インターフェースを完全に制御したいならば、これはそのための方法です。
ビジネスのために Web サイトをブランディングする最善の方法をすべて理解したところで、個人のブランディング カスタマイズについて説明します。
表示名を更新する
新しい WordPress Web サイトでよく目にすることです。
このように名前を残しておくと、サイトはあまりプロフェッショナルに見えませんし、確かに個人のブランドにはつながりません。
投稿のバイラインとコメントに表示される名前は表示名と呼ばれ、ユーザー > プロファイル メニューから変更できます。
一度保存すると、サイト全体ですぐに更新されます。
この動画では、表示名の使用方法について詳しく説明しています：
名前を設定したら、カスタム アバターも追加したいと思います。
カスタム アバターを表示する
このように、新しい表示名の横にデフォルトのアバターが表示されるのは好ましくありません：
ほとんどの WordPress テーマは Gravatar と統合されており、画像を追加するとすぐにサイト上に表示されます。
Gravatar をご存じない方のために説明すると、これは非常にシンプルなサービスです。
Gravatar> は非常にシンプルなサービスです。
メールアドレスを追加し、関連付ける画像をアップロードするだけです。
すべての投稿に自分の名前と画像を表示することは素晴らしいスタートです。
By “author box”, I mean something like this:
Author box is great for building your brand for two reasons.
The first, it gets your name and faces in front of visitors.これは、ブランド確立には最適ですが、これは、訪問者があなたの名前や顔を見ることができるようにするためです。
次に、短い経歴を追加して、さらに個性と親近感を持たせることができます。 さらに、好きなページにリンクすることができます。
投稿コンテンツの後に著者ボックスが表示されるので、それを見た訪問者はちょうどそのコンテンツに自分を関連付けるための素晴らしい時間である投稿を読み終えています。
利用可能なオーサー ボックス プラグインはかなりありますが、このプラグインは柔軟性と標準の品質のバランスが最も優れていると私は考えています。 または、このガイドに従って、著者紹介ボックスを追加することもできます。
サイトをカスタマイズする次の方法は、個人のブランドをより速く構築するのに役立ちます。
Add an “About Me” widget
ウェブサイトにサイドバーがある場合、ブランドの構築に最適なカスタマイズは、上部に About Me ウィジェットを含めることです。
これにより、公開するすべてのページで名前とアバターを表示できます。
テキスト ウィジェットまたは HTML ウィジェットを使用してこのようなレイアウトを自分で作成するか、または Easy Profile Widget プラグインをインストールできます。
ウィジェットといえば、WordPress ウェブサイトをカスタマイズするもう 1 つの素晴らしい方法があります。
ウィジェットを表示するページを制御する
ウィジェットは素晴らしいですが、1 つ問題があります。
サイドバーにウィジェットを追加したいことがありますが、ウェブサイトのすべてのページに表示したいとは思わないはずです。
Widget Options プラグインを使用すると、各ウィジェットが表示される投稿やページを正確に選択できます。
Widget Options をインストールすると、すべてのウィジェットにこの新しいセクションが追加されるのが確認できます。
すべてのカテゴリなどページタイプ全体にウィジェットを一度に追加したり、特定のカテゴリや個別のページを選択したりすることができます。
選択したページでウィジェットを含めるか除外するかを簡単に切り替えることができるので、このプラグインはサイトに驚くべき柔軟性を与えます。
ここで、サイトのカスタマイズをアップグレードする別の方法を紹介します。
Add category descriptions
サイトの通常のカテゴリ見出しは、次のように表示されます。
説明を追加すると、訪問者がそのページで何を見つけるかを正確に理解できるようになり、SEO 対策にもなります。
カテゴリ ページ（投稿 > カテゴリ）にアクセスし、任意のカテゴリをクリックして編集することができます。
ほとんどのテーマは、このように見出しの下のカテゴリページに説明を表示します。
このカスタマイズは数分で完了でき、あなたのサイトをより専門的にすることが可能です。
サイトの専門性を高めるもう 1 つの方法は、フッター テキストをカスタマイズすることです。
Most WordPress themes includes a short design credit at the bottom of the site.
While is not possible to remove this text without writing code, some theme like Ignite, include the simple option to change the footer text in the Customizer.これは、フッター テキストが表示されるようにカスタマイズする方法です。
任意のテキストを含めることができますが、多くの Web サイトでは、会社名、現在の年、および著作権アイコンを含めることを選択しています。 絵文字を使用して著作権記号を追加することも、これをクリップボードにコピーすることもできます – ©
Customize the emails WordPress sent
WordPress には、送信するメッセージをあらかじめたくさん書いておくことができます。 たとえば、誰かがあなたのサイトに参加したときや、パスワードを変更したときのためのメールがあります。
これらのメッセージのどれもあなたのためのブランドであるつもりはないので、あなたは通知プラグインをインストールして、メールのコピーを完全に制御できるようにすることができます。
このプラグインは驚くほどカスタマイズ可能で、既存のメールのコピーを変更したり、メール送信用のまったく新しいイベントを追加したりできます。
通常、Webサイトのカスタマイズはサイトの視覚的な変更と考えられていますが、メール用にカスタム コピーを書いておけばカスタマイズをさらに進められるでしょう。
サイトのあらゆる側面を本当にカスタマイズしたい場合、最後のステップの 1 つは 404 ページを編集することです。
404 ページのカスタマイズ
ページの公開を解除したり URL を変更したりして、誰かが古いアドレスにアクセスすると、次のような 404 画面が表示されます：
サイト上のリンク切れや404 エラーをきれいにしたいとは思いますが、ウェブサイトにとってはまったく当然の現象なのです。
時々 404 ページが表示されることがわかっているので、これはカスタム ブランド ページを作成するもうひとつのチャンスです。 これは非常に賢い方法で設計されています。
404page を使用すると、好きなコンテンツを含む通常のページを公開し、それを 404 ページとして割り当てることができます。 これは、エラー ページ用にカスタム エディタを使用するよりもはるかに簡単で柔軟です。
Master the HTML widget
コードを書くことを学ぶのは大変ですが、そこで問題なのは…
HTML は PHP や Javascript などのプログラミング言語ではありません。 HTML は単なるマークアップです。
つまり、HTML は本当に早く学ぶことができ、一度基本を知れば、自分のサイトをもっとコントロールできることがわかります。
WordPressに付属するHTMLウィジェットでは、新しいプラグインを追加しなくても、ほぼどんなコンテンツやレイアウトでも作成することができます。
たとえば、以前、サイドバーに「私について」ウィジェットを作成するためのウィジェットをお勧めしましたが、これは HTML の書き方を知っていれば、新しいプラグインを追加しなくても簡単に作成できます。
コードの第一歩として最適なので、より技術的に学びたい WordPress ユーザーに強くお勧めします。
まとめ
まず最初に、ここまで来られたことをお祝いします！
この記事は、WordPress ウェブサイトをカスタマイズする方法をさらに考え出すと長くなり続けました。
正直に言うと、この投稿ではまだ表面を削っただけです – あなたのサイトに加えることができる他の変更点の負荷があります。 これらはすべて完全に無料で使用できます – 永久に！
テーマ コレクションを見る →
質問や共有したい他のアイデアがある場合は、下のコメント セクションに投稿してください。
Ben Sibleyは、WordPressテーマデザイナー&デベロッパーで、Compete Themes.の創設者でもあります 。