カスタムWordPressウェブサイトの作成–オプション
公開: 2020-10-16今日の膨大な数のWordPressWebサイトは、事前に作成されたテーマを使用して作成されています。 多くの場合、このテーマは、インポートできるいくつかの「デモ」Webサイトを提供します。 ビジネスやブログに最適なビジュアルスタイルを実現するために、WordPress Webサイトをカスタマイズすることをお勧めしますが、その可能性は高くなります。
WordPress Webサイトのカスタマイズに真っ向から取り組む前に、新しいデザインに何が必要かを慎重に検討することが重要です。これにより、これを実装するために使用される方法が部分的に決まります。 重要なのは、たとえばテーマファイルやWordPressコア自体を更新する場合など、行った更新を保存して上書きしないことが明らかに重要です。
よくある誤解は、WordPress Webサイトをカスタマイズする際の「正しい」手順は、最初に子テーマを作成することであるというものです。 この子テーマは親テーマの横にあり、デザインの変更（特にテーマのCSSファイル）が行われる場所です。 間違いなく、サイトのスタイルをカスタマイズしたり、機能を微調整したりするときに子テーマを作成して使用することがベストプラクティスになる可能性があります。 ただし、WordPress Webサイトをカスタマイズする方法はたくさんあり、これを行う必要はありません。 子テーマはWebサイトの複雑さを増すため、これはニュースを作成します。特に、コーダーでない場合はそうです。 複雑さを軽減し、サイトのデザインの編集を容易にするためにできることは何でも歓迎する必要があります。
テーマを大幅にカスタマイズする必要がある場合は、子テーマを使用するのが理にかなっています。 ただし、単純な微調整と更新の場合、子テーマはやり過ぎです。 子テーマなしでサイトをすばやく簡単にカスタマイズする方法について、いくつかの提案があります。 最も重要なのは、これらは、テーマまたはWordPressコアを後日更新した場合に、行った更新を保持する堅牢なメソッドです。 見てみましょう。
WordPressカスタマイザー
WordPressは、Webサイトの外観を微調整する必要があることを理解しています。 これを支援するために、デフォルトの組み込みカスタマイザーが含まれており、使用しているテーマに関係なく、Webサイトのデザインにさまざまな更新を加えることができます。 WordPressカスタマイザーは非常に使いやすく、WP-Adminから[外観]>[カスタマイズ]メニューに移動してアクセスできます。 これが実際にどのように機能するかを見てみましょう。
下のこの画像は、現在のデフォルトのWordPressテーマ（Twenty Twenty）がアクティブな場合の単純な投稿の外観を示しています。
それでは、カスタマイザーオプションを少し試してみましょう。 WP-Admin内から、またはページと投稿に表示される黒いメニューバーの[カスタマイズ]リンクをクリックして、[外観]>[カスタマイズ]に移動します。
ロードすると、配色やロゴなど、Webサイトのさまざまな要素を制御するさまざまなオプションが表示されます。 この場合、「サイトID」をクリックして、Webサイトのロゴを変更できます。 このセクションに新しいロゴをアップロードしただけでなく、ファビコンとタイトル/スローガンも追加しました。
それが終わったら、「色」をクリックし、そこからWebサイトの背景色を変更し、背景テクスチャ画像を追加しました。
ほんの数回のクリックで、デフォルトのWordPressカスタマイザーを使用して、Webサイトの外観を根本的に変更しました。 良い！
CSSのスキルを持っている場合は、CSSを使用してサイトのデザインをさらに変更することができます。 WordPressカスタマイザーには優れた「追加CSS」エディターがあり、CSSを追加して、その影響をリアルタイムで確認できます。 ただし、カスタマイザーの左上にある[公開]ボタンをクリックするまで、変更は有効になりません。
簡単なCSSで達成したことは次のとおりです。
今では色がとてもよく合っていることに同意していただけると思います。 また、きれいに見える虫眼鏡アイコンの下から「検索」という単語を非表示にしました。 さらに、フォントファミリと色を変更しました。
テーマカスタマイザー
Webサイトに適切なテーマを選択すると、カスタマイズにかかる時間を大幅に節約できます。とにかく、サイトを「適切に」表示するための多くの作業は、テーマ開発者によってすでに行われているためです。 結局のところ、最初に必要なものに近いデザインを提供するテーマを選択できたのに、CSSの作成とオプションの更新に何時間も費やすのはなぜですか。
多くのテーマには追加のカスタマイズオプションが含まれ、多くの場合、独自の「オプションパネル」を介して提供されます。 このオプションパネルの機能と使いやすさは、テーマごとに大きく異なります。 おそらく当然のことながら、より適切にコーディングされ、より適切に管理されたテーマは、それほど洗練されていないテーマよりも、より豊かで強力なオプションパネルを持つ傾向があります。
私たちのお気に入りのテーマの1つはアストラです。 1,000,000人以上のユーザーを誇り、堅牢にコーディングされ、適切に設計され、定期的に更新されているため、明らかに非常に人気があります。
ご想像のとおり、Astraには便利なオプションパネルが付属しており、色、サイドバーオプション、レイアウトスタイルなど、さまざまな設定を変更できます。 テーマをインストールしてWP-Admin内から[外観]メニューに移動すると、[Astraオプション]サブメニューからこのパネルにアクセスできます。
多くのテーマには、同様の一連の機能を提供するオプションパネルが含まれているため、コード行に触れることなく、または子テーマを必要とせずに、Webサイトをすばやく簡単にカスタマイズできます。 この使いやすさは、WordPressとテーマを組み合わせることで見栄えのするWebサイトをすばやく作成するための強力な方法の1つです。
CSSプラグインでカスタマイズ
間違いなく、デザインの観点からWebサイトに変更を実装する最も強力な方法の1つは、CSSコードを追加または変更することです。 CSS（またはカスケードスタイルシート）は、HTML要素が画面にどのように表示されるか（つまり、どのように見えるか）を記述します。 CSSがないと、Webサイトにスタイル要素がまったくないため、非常に重要です。
これまでにコーディングしたことがない場合でも、CSSは実際には非常に簡単に習得して使用できます。 確かに、高度なCSSは書くことを学ぶのに少し時間がかかるかもしれませんが、ほんの少しのグーグルと練習で達成できることに驚くでしょう！
WebサイトのCSSを更新するには、a）サイトに既に存在するCSSファイルを直接編集するか、b）CSSを更新できるプラグインを使用する必要があります。 オプションAは、FTPクライアントを使用してWebサイトのCSSファイルにアクセスする必要があるため、より困難ですが、プラグインは、WordPressAdmin内から直接アクセスできる使いやすいエディターを提供できます。 以下のCSSプラグインオプションをいくつか見てみましょう。
シンプルなCSSプラグイン
人気のあるCSSプラグインは、TomUsborneによるSimpleCSSです。
シンプルなCSSを使用すると、CSSをWebサイトにすばやく簡単に追加できます。 さらに良いことに、カスタマイザーでライブプレビューエディターを提供します。これは、コードが目的の外観を生成しているかどうかを即座に確認できることを意味します。 ボーナスとして、CSSの変更をサイト全体で更新するのではなく、CSSを1つの特定のページまたは投稿に追加することもできます。
シンプルなカスタムCSSとJS
Simple Custom CSS＆JSは、もう1つの優れたCSSプラグインです。 これは、WordPress Admin内からサイトのCSS（および別のプログラミング言語であるJS）コードを更新できるようにすることで、上記のSimpleCSSプラグインと同様に機能します。 カスタムCSSでコードをWebサイトのヘッダー、フッター、または本文に印刷するかどうかを指定することもできます。これにより、さらに柔軟性が高まります。
ダウンロードしてインストールすることから始めましょう。 次に、メニューの新しいカスタムCSSとJSリンクに移動して、遊んでください。 例としていくつかのHTMLコードを追加しました。
そしてそれをヘッダーに表示するように設定します
また、CSSスタイルを次のように追加しました。
そして、これは簡単です。
ページビルダーでカスタマイズ
カスタムWordPressWebサイトを作成する別の一般的な方法は、WordPressサイトで利用可能なビルダーの1つを使用することです。 WordPressには、Gutenbergと呼ばれる独自のページビルダーが組み込まれています。 サードパーティのページビルダーには、BeaverBuilderとElementorが含まれます。
これらのツールを使用すると、Webサイトの外観を非常に簡単にパーソナライズできます。 ドラッグアンドドロップエディタがすべてに含まれているため、コード行に触れることなく、ページ内でコンポーネントを移動したり、色、フォントサイズ、スタイルなどを変更したりできます。
グーテンベルク
前述のように、WordPressはGutenbergと呼ばれるデフォルトの組み込みブロックエディターを提供します。 2018年後半に導入された比較的新しいものです。シンプルなドラッグアンドドロップエディタを使用して、ページの要素をすばやくカスタマイズする簡単な方法を提供します。
Gutenbergでは、カスタムコードを使用せずにマルチメディアコンテンツを挿入してスタイルを設定できるだけでなく、WordPress REST API、JavaScript、およびReactに基づいて独自のカスタム投稿やページを作成することもできます。
ビーバービルダー
シンプルなユーザーと上級ユーザーの両方に人気のあるBeaverBuilderは、市場で最も古いページビルダープラグインの1つです。
優れたインターフェイスとスタイル、およびすぐに使用できる多くのウィジェットとテンプレートが含まれているため、単純な投稿テンプレートの変更から、より複雑なビジネスWebサイトの更新まであらゆるものに理想的な選択肢を提供します。
Elementor
Elementorは、WordPressWebサイトをカスタマイズするためのもう1つの強力なツールです。 Elementorは、コーダー以外の多くの人にとって最良の選択であると考えられており、見栄えの良いWebサイトをすばやく簡単に作成したり、既に構築されているWebサイトのスタイルを変更したりできるさまざまな機能を提供します。
これらの強力なページビルダーのより広範な比較に興味がある場合は、ElementorとBeaverBuilderの記事を確認してください。
Elementorを使用してビジネスフォームのスクラッチ用に新しいWebサイトを構築する方法に興味がある場合は、8部構成のシリーズを確認してください。
子テーマを使用してカスタマイズする
ご覧のとおり、子テーマを使用せずにWebサイトのデザインを変更する方法は複数あります。 しかし、物事は必ずしもそれほど単純ではありません。 場合によっては、当社のWebサイトで次の1つ以上のタスクを実行する必要があることがあります。
- CSSファイルを直接編集する
- テーマのPHPテンプレートを変更する
- Functions.phpファイルを編集します
- JavaScriptを追加または含める
上記のいずれかを行う必要がある場合は、子テーマを使用してカスタムWordPress Webサイトを構築する必要があります。そうしないと、将来テーマファイルを更新するときに変更が失われるリスクがあります。
結論
ご覧のとおり、WordPress Webサイトのデザイン要素を更新する場合、子テーマを使用する必要は必ずしもありません。 CSSプラグインまたはページビルダーのいずれかを使用することは、デザイン変更を実装するための最適な方法であり、通常、子テーマを介してコンテンツを編集するよりもはるかに簡単に使用できます。 この記事が、子テーマがいつ必要か、または使用しないかを決定するために必要ないくつかの有用なオプションと知識を提供してくれることを願っています。