ヘッダーにロゴを挿入するにはどうすればよいですか？

Question

ヘッダーにロゴを挿入するにはどうすればよいですか？

- 10
- 104280 2013-06-26
私はWordPressの世界ではかなり新しいです(私はJoomlaから来ました)

このWordPressテストサイトにロゴを挿入するのにいくつかの問題があります: http://onofri.org/example/

「EXAMPLE」テキストではなく、ウェブサイトのヘッダーにロゴを配置したい.

WordPress構成パネルを調べても、ロゴをアップロードしてヘッダーに「EXAMPLE」テキストを自動的に配置できる場所が見つかりません(これがJoomlaのような標準のWordPress機能であるかどうかはわかりません.これは、特定のテーマによって、またはコードに直接配置する必要がある場合に利用できるようにすることができる機能です)

しかし、テーマの設定でも見つかりません.

ロゴを配置するにはどうすればよいですか?HTMLコードに直接挿入する必要がありますか?

I am pretty new in WordPress world (I came from Joomla)

I am finding some difficulties to insert a logo into this WordPress test site: http://onofri.org/example/

I want put my logo in the header of the website, instead the "EXAMPLE" text.

Looking into the WordPress configuration panel I am not finding where I can upload the logo and automatically put it instead the "EXAMPLE" text in the header (I don't know if this is a standard WordPress function as in Joomla or if it is a feature that can be made available by some specific themes or if I have to put it directly into the code)

However I am not finding it even in my theme settings.

What have I to do to put my logo? Have I to insert it directly into my HTML code?

theme-development themes templates logo

3 回答

投票

- 2
- 2013-06-26
「ロゴ」機能がある場合、それはテーマの一部になります.おそらく、テーマオプションまたはテーマのカスタマイズシステム.

私は通常、カスタムヘッダーを使用して商用サイトでこれを行いますが、カスタムヘッダーは特にそうではありませんロゴ用.これは一般的な「ヘッダー画像」機能です.

要するに、これはテーマによって異なります.作成中のテーマの場合は、テーマを編集して追加できます.すでに参照されているコーデックスの記事を参照してください.

If there is a "logo" functionality, it will be part of the theme. Perhaps a theme option or part of the theme customization system.

I typically use a Custom Header to do this for commercial sites, though a custom header is not specifically for a logo. It is a generic "header image" function.

In short, this depends on the theme. If it is a theme you are creating, you can edit the theme to add it. See the Codex articles already referenced.
- 2
- 2013-06-27
ヘッダー画像を変更するには、ワードプレスの管理パネルに移動します. 外観メニューでヘッダーをクリックすると、ヘッダー画像とテキストをアップロードしてヘッダーに表示するオプションがあります.

表示されていない場合は、ヘッダーファイルを編集し、ヘッダーに次のコードがまだ存在しない場合は挿入する必要があります.

<?php $header_image = get_header_image(); if ( ! empty( $header_image ) ) : ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
To change the header image go to the admin panel of your wordpress. In the appearance menu click on header and there you will find the option to upload your header image and Text to appear in your header.

If it's not showing then you have to edit your header file and insert the following code in your header if it does not exist already.

<?php $header_image = get_header_image(); if ( ! empty( $header_image ) ) : ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>

Mayeenul Islam · Accepted Answer · 2013-06-27

15

2013-06-27

標準に準拠するようにヘッダーセクションを少し変更してみてください.現在のコードは次のとおりです.

 <div id="header-image">
   <img width="1102" height="350" alt="" class="header-image" src="http://onofri.org/example/wp-content/uploads/2013/06/header1.jpg">
</div>

変更方法は次のとおりです.

 <div id="header-image">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
       <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="Logo" width="HERE" height="HERE" />
    </a>
</div>

現在、ステップは3つだけです:

テーマのデフォルトのヘッダー画像設定を使用する代わりに、上記のコードを使用してテーマのheader.phpを編集できます.
[新しいメディアの追加]から画像を挿入する代わりに、 cPanel (ウェブホストのコントロールパネル)を介して、 'images'という名前のテーマフォルダのサブフォルダに画像をアップロードできますem>.
ロゴの背景を使用して巨大な画像を作成する代わりに、Photoshop(または任意のグラフィックソフトウェア)で単純な背景のないロゴを作成してみてください.Photoshopの場合は、ロゴ画像をレイヤーに配置した後に作成してください. 、背景レイヤーを削除してから、画像をWeb用に保存します([ファイル]> [Web用に保存... [ Ctrl + Alt + Shift + S ])そして良い結果を得るために PNG-24 のフォーマットを選択してください.次に、それをlogo.pngとして保存し、「/wp-content/themes/simplemarket/images/」フォルダーに配置します.

残りを手に入れてください.ご不明な点がございましたら、こちらからお気軽にコメントしてください.

Try modifying the header section a bit to comply with the standards. Here is what your code right now:

<div id="header-image">
   <img width="1102" height="350" alt="" class="header-image" src="http://onofri.org/example/wp-content/uploads/2013/06/header1.jpg">
</div>

Here is how you can modify the things:

<div id="header-image">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
       <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="Logo" width="HERE" height="HERE" />
    </a>
</div>

There are only 3 steps now:

Instead of using the theme's default header image settings, you can edit your theme's header.php with the code given above.
Instead of inserting image from the Add New Media, you can upload image via cPanel (Control Panel of your web host) into the theme folder's sub-folder named 'images'.
And instead of making a huge image with background for your logo, try making a simple background-less logo in Photoshop (or any graphics software) - in case of Photoshop, just do it: after placing the logo image in a layer, just delete the background layer and then save the image for web (File > Save for web... [Ctrl + Alt + Shift + S]) and choose the format PNG-24 for a good result. Then save it as logo.png and place it to the '/wp-content/themes/simplemarket/images/' folder.

Hope you get the rest. If any question, please feel free to comment here under.