Genesis子テーマのヘッダー画像ロゴを追加する方法[年]

Genesis Framework は、インターネット上で最も美しくクリエイティブな Web サイトの作成に使用されている人気の WordPress テーマです。これは、非常に多用途で使いやすく、カスタマイズ可能なため、起業家向けブログでのお気に入りの XNUMX つです。

Genesis テーマに関して多くの人が難しいと感じることの XNUMX つは、ヘッダー画像のロゴを追加することです。幸いなことに、数回クリックするだけで、独自のカスタムロゴを配置できます。

これは、サイトにビジネスに合った特定のブランドを設定したい場合に役立ちます。これを追加するプロセスには 10 分もかかりません。必要なプラグインは XNUMX つだけです。これは、WPSquare の Custom Logo Uploader と呼ばれます。

WordPress 管理パネル内でワンクリックするだけで、わずか数秒でインストールできます。

ここで手順は次のとおりです。

1) プラグインをインストールする

2) 希望の画像を追加します

3) 設定を行う

4) 変更を保存し、5 ～ 10 分後に Genesis 子テーマの設定 > ヘッダー画像に戻ります。

6) カスタムロゴを選択します

7) 希望のURLを入力します

8 )変更を保存します。

Genesis子テーマのヘッダー画像ロゴを追加する方法-

ステップ 1 : ダッシュボードでロゴを設定する

「」を使っているので、TwentyTen 子テーマ「ダッシュボード >> 外観 >> カスタマイズ >> ヘッダーに移動し、使用したいロゴを追加するだけです。独自のカスタム画像を追加するか、「新規追加」セクションにある WordPress で利用可能な画像から選択することができます。

私の場合は、「header-logo.png」という名前のファイルをクリックして、ダッシュボードメディアフォルダーから画像を追加します。.

ステップ 2 : Genesis 子テーマ関数にカスタムコードを追加します。

php Genesis 子テーマの function php ファイルを開きます。このファイルは通常、functions.php という名前のテーマのルートフォルダーにあります。このファイルは、 Filezilla などの FTP または SFTP クライアントを使用して開くことができます。

このファイルが見つからない場合は、作成できます。 Genesis 子テーマの関数 php ファイルの作成方法を示す投稿を書きました。

これは、functions.php ファイルの最後に追加したコードですが、PHP タグを閉じる前に追加したものです?>

// BP ヘッダーのロゴ

add_custom_image_header( 'bp-logo' );

これは、Genesis に「bp-logo」という名前の画像を Web サイトのヘッダーロゴとして使用するように指示します。この名前は変更できますが、次の手順でも忘れずに変更してください。ここで、 bp-logo という名前の新しいフォルダーを作成します。

テーマのルートディレクトリ内に作成する必要があります。詳細については、Genesis 子テーマにフォルダーを作成する方法に関する私の投稿を確認してください。

ステップ 3 : サードパーティのテーマのロゴ画像を作成する

問題は、ロゴ画像がWordPressダッシュボードのカスタマイザーセクションに表示されないことです。, ただし、Web サイトがオンラインで公開されると、フロントエンドに表示されます。

これは、この画像をテーマの header.php に追加する必要があることを意味します。幸いなことに、これを編集することでこれを行うことができます。テーマ WordPress 管理エリアから直接。

必要なのは、テーマの zip ファイルと FTP または SFTP クライアントです。 FileZillaを。あなたが使用することができます phpMyAdminのまた、使い方を知っていれば。

お気に入りのプログラムを使用して zip アーカイブを開き、 /wp-content/themes/テーマ名/header.php に移動します。このファイルにあるコードをコピーしますが、PHP 終了タグ ?> の前にあります。

以下は、カスタムコードを追加した header.php ファイルの例です。

”タイトル=” ” rel=”ホーム”> ” alt=” ”タイトル=” ”/>

ステップ 4 : Genesis 子テーマのヘッダーにカスタムコードを追加する.

php 次に、テーマの header.php ファイル ( /wp-content/themes/YOUR THEME NAME/ にあります) を開き、PHP タグ (ファイルの最後にあります) を閉じる前に次のコードを追加します。

ステップ 2 : 完了 Web サイトにアクセスすると、フロントエンドにロゴが表示されます。

しかし、このコードには問題があります。サーバー内に画像ファイルが作成され、大量の画像をアップロードするとサーバーのスペースが不必要に占有されます。

そこで、この問題を解決するために、「 Genesis Simple Hooks 」というプラグインを使用しました。ここでは、functions.php ファイルに追加した更新されたカスタムコードを示します。

function bp_add_header_logo() { if ( !is_page() || isnull( get_post_meta( get_the_ID(), 'bp-logo', true ) ) ): ?> ”タイトル=” ” rel=”ホーム”> ” alt=” ”タイトル=” ”/>

WordPress プラグイン (Genesis Simple Headers) の使用

WordPress は優れた CMS (コンテンツ管理システム) であり、さまざまな種類の Web サイトの作成に使用できます。利用可能なプラグインの広範なコレクションがあり、さらに強力になります。

Genesis Simple Headers プラグインを使用すると、WordPress Web サイトにカスタムヘッダーを追加できます。独自のヘッダー画像をアップロードすることも、WordPress テーマによって提供される画像など、プラグインで利用可能なデフォルトのオプションから選択することもできます。

ブログのヘッダーがブログに正しく表示されない場合は、まず次の手順を使用して問題を解決します。

画像が正しいフォルダーにアップロードされているかどうかを確認します (/wp-content/uploads/yourimage.jpg から選択します)。そこで見つからない場合は、画像のサイズが正しいかどうかをもう一度確認してください。次に、FTP ソフトウェアを使用して、正しいフォルダーにアップロードできます。

画像が破損していないか確認してください (画像編集プログラムで開いてみてください)。「はい」の場合は、そのファイルを削除し、新しいファイルをアップロードして、この問題が引き続き発生するかどうかを確認します。

[外観] – [Genesis Simple Headers] – [新しい画像の追加] に移動するだけで、別のヘッダー画像を作成してみることができます。

また、[外観] – [Genesis シンプルヘッダー画像の編集] に移動して、そこから XNUMX つ選択するか、インターネットから画像をアップロードすることで、WordPress テーマに付属するデフォルトの画像を使用してみることもできます。

それでも問題が解決しない場合は、お問い合わせください [メール保護] さらに支援が必要です。

このプラグインの使用方法を知りたい場合は、以下をお読みください…

この記事は初心者のみを対象としており、この WordPress プラグインの使用の基本を理解するのに役立ちます。ユーザーが Web サイトに Genesis Simple Headers プラグインをすでにインストールしており、WordPress ダッシュボードの使用の基本を理解していることを前提としています。

WordPress ブログにカスタムヘッダーを追加する基本手順

1) WordPress ブログのダッシュボードに移動し、[外観] にマウスを置きます。そこから「メニュー」を選択します。

2) Genesis Simple Headers ドロップダウンメニューの Header #1 をクリックします。新しいページが開き、多くのオプションが表示されます。そこで提供されるオプションはどれも変更できます。

3) 最初のオプションはヘッダー画像です。参照ボタンをクリックしてコンピュータから画像を選択するか、このセクションで利用可能なデフォルトの画像の XNUMX つを使用します。

画像の一部として表示されるため、その画像を使用する許可があることを確認してください。ブログコンテンツ検索結果にも表示されます。必要に応じて、XNUMX つのヘッダー画像すべてに同じ画像を使用できます。そのセクションに表示されるテキストを変更することもできます。

4) 5 番目のドロップダウンメニューはヘッダータイプです。このプラグインには 1 つのタイプが用意されており、そのうちの 1 つを選択できます。ただし、タイプを HXNUMX に変更すると、HXNUMX ヘッダーとしてさらにスタイルを設定しやすくなります。

5) XNUMX 番目のドロップダウンメニューは [位置] で、これを使用してヘッダーの位置を変更できます。あなたのブログの画像 (左、中央、または右)。

6) 3 番目のドロップダウンメニューでは、投稿のどのセクションをヘッダーに表示するかを選択できます。 Genesis の注目の画像、紹介テキスト、投稿タイトルの XNUMX つのセクションがあります。何か他のものを表示したい場合は、指定されたセクションにその HTML コードを入力すると、そこに表示されます。

7) すべての変更を行った後、「メニューを保存」をクリックします。

8) 新しいヘッダー画像はすぐにブログに表示され、訪問者がブログ投稿を開くたびに、このヘッダー画像が上部に表示されます。ただし、「外観」→「カスタマイズ」→「サイドナビゲーション」に移動し、右または左を選択することで位置を右または左に変更できます。

Genesis子テーマのStyle.cssファイルの編集-

公式 WordPress テーマディレクトリで [i]Element[/i] という Genesis 子テーマを見つけたので、それをローカル開発環境で使用したいと思いました。

このサイトの最初と XNUMX 番目の投稿では、開発目的で新しいジェネシス子テーマを設定する方法について説明します。まだチェックしていない場合は、チェックしてみてください。

最初の投稿にあるインストールスクリプトを実行しようとした後、子テーマのスタイルシートが「_s」というディレクトリにインストールされていることがわかりました。これは、Genesis を除くすべての WordPress テーマに適しています。

次に、子テーマファイル style.css を編集し、パスを「Element Child Theme/style.css」から「Element Child Theme/*/style.css」に変更しました。

そしてそれは実際に機能します！

Links

結論 - Genesis子テーマ2024のヘッダー画像ロゴを追加する方法

Genesis Framework は、利用可能な WordPress テーマの中で最も人気のあるものの XNUMX つです。カスタマイズが簡単で、ビジネスを軌道に乗せるのに役立つ機能が多数搭載されています。

Web サイトをパーソナライズする XNUMX つの方法は、Genesis 子テーマのヘッダー画像ロゴを追加することです。このロゴは、各ページの上部にあるデフォルトの「Genesis Framework」テキストの代わりに表示されます。

ブログは、知識を共有し、製品やサービスを宣伝し、視聴者を獲得するための優れた方法です。しかし、どうやってデザインするのでしょうか？

美しいウェブサイトを作成するのに最適であると主張するさまざまなブログテーマがたくさんありますが、どれがあなたに適していますか? 現在入手可能な最も人気のある Genesis 子テーマテンプレートをいくつか取り上げ、私たち自身の個人的な好みに基づいてデザインの品質を 1 つ星から 5 つ星までランク付けしました。