WordPress テーマを微調整する 10 の方法

Brian Casel は Web デザイナー兼オーナーです。ThemeJam WordPress テーマそしてカスジャムメディア。ブライアンのブログをフォローできます。ブライアンカセル.comまたはTwitterで@CasJam

ワードプレスは、今日の Web デザイン業界で最も急速に成長している CMS プラットフォームです (はい、これは真の CMS です)。 WordPress コミュニティにおける活動の多くは、主に WordPress テーマの市場によって動かされています。

無料テーマと商用テーマの豊富な選択が WordPress の魅力です。ただし、多くの場合、テーマはさらなるカスタマイズのための出発点にすぎません。 Web 開発者や DIY Web サイトの所有者は、優れたテーマから始めて、自分 (またはクライアント) のニーズに完全に適合するように調整することを好みます。

多くのテーマ、特に商用テーマには、堅牢なテーマ オプション ページがパッケージ化されており、テーマの多くの側面を構成できます。コードに入る前に、利用可能なオプションを確認してください。とはいえ、すべてのテーマは異なるため、完全にカスタマイズするには手を汚す必要がある場合があります。

以下は、Web サイト所有者が調整したい最も一般的なものの一部と、もちろんそれらを調整する方法です。この記事は、Web サイトのデザイン、コード編集に関する軽い知識があり、WordPress に精通していることを前提としています。

具体的な内容に入る前に、一般的なヒントを 1 つ挙げておきます。多くの場合、「親テーマ」自体を編集するのではなく、「子テーマ」を作成または編集して変更を行うことをお勧めします。ここでの利点は、テーマの作成者がコア機能の更新をリリースした場合に、変更を失うことなくテーマを簡単に更新できることです。をチェックしてくださいWordPress.org コーデックス子テーマについて詳しくは、こちらをご覧ください。

1. テーマの CSS を編集する

色、フォント、レイアウト、背景、間隔、その他の視覚要素を微調整したい場合は、CSS を編集することから始めるのが最善の策です。ほとんどの場合、テーマの CSS スタイルはファイル内にあります。スタイル.css。このファイルは WordPress 管理者でテーマを定義するものであるため、常にテーマ内に存在します。ただし、追加のスタイルシートがサブフォルダーに存在する場合もあります。

テーマ ファイル内の特定のスタイルと場所を追跡する最良の方法は、次のようなブラウザ Web 開発ツールを使用することです。ファイアバグ。それはファイアフォックスこの拡張機能を使用すると、CSS スタイルをその場で検査して調整し、編集する必要があるスタイルシートと行番号をすばやく見つけることができます。 FireBug をまだ使用していない場合は、今すぐ始めてください。

2. 投稿の抜粋または全内容を表示する

場合によっては、テーマのデフォルトで、ブログ投稿の完全なコンテンツがホームページに表示されます。クリックして記事全文を読むためのちょっとした「ティーザー」として、投稿からの短い抜粋のみを表示したいとします。あるいは、その逆かもしれません。テーマでは抜粋が表示されますが、ブログ投稿全体を表示したい場合があります。交換する必要がある 2 つのタグは次のとおりです。

このタグには、投稿の完全なコンテンツが表示されます。

詳しくはこのタグをご覧ください。

このタグは投稿の抜粋を表示します ([投稿の編集] 画面では、本文ボックスのすぐ下のテキスト ボックスです)。

抜粋が設定されていない場合は、ブログ投稿の最初の数文が自動的に表示されます。詳細はこのタグから

3. カスタム ページ テンプレートを作成する

場合によっては、他のページとは異なる独自のレイアウトを必要とするページが 1 つあることがあります。 HTML マークアップにはある程度の柔軟性が必要ですが、サイト上のすべてのページには影響を与えたくありません。 WordPress を使用すると、独自のテンプレートを作成して特定のページに割り当てることが非常に簡単になります。その方法は次のとおりです。

1.テーマを複製するページ.phpファイル。これは、WordPress が一般的なページを表示するために使用するファイルです。

2.任意の名前に変更します。この例では、次のように呼びます。価格設定.php(独自の「価格設定」ページを作成する予定です)。

3.ページの一番上で、これをコードに追加します。

/*

テンプレート名: 価格設定

*/

?>

4.このページ テンプレートのマークアップと CSS を必要に応じて変更します。

5.「価格設定」ページを作成します。 [テンプレート] ドロップダウンを使用して、[価格] を選択します。

6.ページを保存します。これで、独自のテンプレートで作成したマークアップを使用して表示されます。

4. ループの作成: カテゴリの除外/包含

1 つを除くすべてのカテゴリの投稿を表示したいとします。これはさまざまな理由からよくあるリクエストです。一例として、ホームページの上部に「注目の投稿」スライダーがあり、「注目」に分類された投稿が表示されているとします。残りの投稿をスライダーの下に表示したいと考えていますが、1 ページに同じ投稿を 2 回表示することは避けてください。その方法は次のとおりです。

ループの前に次のコードを追加します。

これにより、カテゴリ ID 8 を持つすべての投稿が除外されます。この数値を除外したいカテゴリ ID に変更します。

おそらく、その逆、つまり 1 つのカテゴリからの投稿のみを表示したいと思うかもしれません。単純!次のように、カテゴリ ID の前の「 - 」を削除します。

詳細については、ザ・ループそして投稿のクエリ

5. ページナビゲーションを簡単に作成する

多くのテーマでは、サイトの上部にすべてのページが表示され、おそらく階層ナビゲーション用のドロップダウン メニューが表示されます。ただし、メイン ナビゲーションからページを除外したいとします。たとえば「プライバシー ポリシー」ページなど、サイト上に前面に表示する必要のないページがある場合があります。

ここでは、ナビゲーションからページを除外する簡単な方法を紹介します。次のコードを見つけて、ページのリストを表示します。

これを次のように変更します。

ID 5 のページを除くすべてのページをリストするように WordPress に指示しています。この番号を除外したいページ ID に変更します。

詳細情報:WPリストページ

6. WordPress 3.0 でメニュー管理を有効にする

ページ、カテゴリ、外部リンクを含めたり除外したりする独自の順序の設定など、サイト ナビゲーションを完全に制御したいとします。ワードプレス 3.0は、この柔軟性を提供する「メニュー」と呼ばれる素晴らしい新機能を提供します。ただし、テーマがサポートしていない限り、この機能は使用できません。

従来のページ ナビゲーションを変更する方法は次のとおりです (wp_list_pages();上記)を管理者が制御する新しいメニューに追加します。

注記:WordPress 3.0 以降を実行している必要があります。

まず、テーマのコードに次のコードを追加して、この機能を有効にする必要があります。関数.phpファイル:

次に、テーマにメニューを追加します (おそらく、header.phpファイル:

もちろん、カスタム メニューを作成する必要があります。外観 > メニュー

詳細情報:WP ナビゲーション メニュー

7. 単純な条件文を作成する

現在表示されているページに応じて、コンテンツの一部を表示または変更したい場合があります。たとえば、「価格設定」ページを表示しているときに、サイドバーに「予算に応じた価格プラン」というメッセージを表示したいとしますが、他のすべてのページでは、このメッセージを「高品質の製品、信頼性の高い」と表示したいとします。サービス!"

簡単な条件文を使用してこれを設定する方法は次のとおりです。

予算に合わせた料金プラン!

高品質の製品、信頼できるサービス!

詳細情報:コンディショナルタグ

8.投稿のサムネイルを追加する

WordPress 2.9 では、投稿サムネイルと呼ばれる便利な機能が導入されました。名前が示すように、カスタム フィールドや投稿コンテンツへの埋め込みを必要とせずに、投稿のサムネイル画像を設定できます。

注記:WordPress 3.0 では、この機能の名前は「アイキャッチ画像」に変更されましたが、機能は変わっていません。

投稿のサムネイルは、投稿リストにカラフルなダイナミックさを追加する場合、または WordPress 投稿をポートフォリオとして使用している場合に便利です。サムネイルを活用する方法は他にもたくさんあります。投稿サムネイルを有効にしてテーマに挿入する方法は次のとおりです。

メニューと同様に、投稿サムネイルもテーマで有効にする必要があります。このコードをテーマに追加します関数.phpファイル:

次に、次のタグを使用して、ループ内に投稿のサムネイル画像を挿入します。

CSS を使用してレイアウトを微調整することもできます。さまざまなサムネイル サイズやトリミング オプションを追加することもできます。チェックアウトこの詳細なチュートリアル詳細については、「サムネイルの投稿機能」を参照してください。

9. すべてのブログ投稿の最後に何か(何でも)を追加します

場合によっては、すべてのブログ投稿の最後に、サービスに関するプロモーション メッセージ、ニュースレターを購読するためのリンク、広告など、一定のコンテンツを追加したいことがあります。

編集したいファイルはテーマのファイルですシングル.php。これは、単一の記事を表示するテンプレートです。そのファイルを開いて、追加のメッセージを追加するのに適した場所を見つけます。通常、記事の後、コメントの前が適切な場所です。次のようになります。

ここに追加メッセージを...

テーマには追加の書式タグなどが含まれている可能性がありますが、これは正しい方向を示すはずです。

10. Google Analyticsトラッキングコードを追加する

誰もが自分のサイトに何人の訪問者が来たのか知りたいと思っています。Googleアナリティクスはトラフィックを追跡するための最も人気のあるツールです。 Google Analyticsの設定は非常に簡単です。無料アカウントが作成されると、Google からコードの塊が提供されます。このコードは、サイトの各ページの下部に埋め込む必要があります。

そのトラッキング コードをフッター.phpファイル。 Google Analytics トラッキング コードを

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe Now & Never Miss The Latest Tech Updates!

Enter your e-mail address and click the Subscribe button to receive great content and coupon codes for amazing discounts.

Don't Miss Out. Complete the subscription Now.