web-dev-qa-db-ja.com

自分のサイトにfaviconを追加する方法 - フロントエンドと管理パネルの両方で

フロントエンドと管理パネルの両方で、WordPressサイトにfaviconを追加するにはどうすればよいですか。私はいろいろな方法を試したが失敗した。

私は知っている、コードをfaviconに示すために：

<link rel="shortcut icon" href="images/favicon.ico" />

どうやって実装できますか？

pluginsthemesfavicon
5
Mayeenul Islam

更新

WordPressを使用しているユーザーには、次の回避策が必要です バージョン4.4よりも古い 。 WordPress v4.4以降を使用している場合は、そのような広範な回避策をとる必要はありません。 Usman Siddiquiの答えに従うだけで、それはthat簡単です。

実際の答え

あなたはWordPressサイトにfaviconを追加することができます。

  • テーマ別
  • プラグインで

準備

ファビコンを追加するには、まず作成する必要があります。ファビコンは通常

  • 16px x 16px、または
  • 32px x 32px。

そのため、最初にグラフィックソフトウェアを使って 'favicon'という名前のファイルを.png透明）または.jpgなどの形式で保存します。ファイルの名前を変更して拡張子を.ico（アイコンファイル）に変更します。 favicon.icoになります。

テーマ別：

ハードコード

テーマを使用してfaviconを実装するには、WordPressを使用していてWordPressの方法でそれを実行する必要があり、ファイルの正確なパスを表示するには_（get_template_directory_uri() を親テーマ、または get_stylesheet_directory_uri()）を使用する必要があります。 子テーマの場合。faviconを実装するコードは（favicon.icoファイルがテーマフォルダー内の "images"という名前のフォルダーに格納されている場所です。

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" />

あなたのテーマの<head>と</head>の間に上記のコードブロックを入れることでfaviconを機能させることができます。

動的コード

Faviconを動的に実装するには、次のコードを使用します。

function add_my_favicon() {
   $favicon_path = get_template_directory_uri() . '/images/favicon.ico';

   echo '<link rel="shortcut icon" href="' . esc_url($favicon_path) . '" />';
}

add_action( 'wp_head', 'add_my_favicon' ); //front end
add_action( 'admin_head', 'add_my_favicon' ); //admin end

私たちは同じコードを使いましたが、今度はそれをアクションを引き起こすための関数で取り入れました。そして、2つのフックを使ってアクションを追加しました。

  • wp_head - テーマのheadセクションにあるwp_head() WordPress関数を使ってフロントエンドにファビコンを起動します
  • admin_head - それはあなたの管理パネルにfaviconを起動させるでしょう

プラグインで

あなたのサイトにfaviconを設定するためのあなた自身のプラグインを作ることができます。たとえあなたがあなたのサイトのテーマを変えたとしても、あなたのfaviconが失われることはないので、それはより良いでしょう。これが私たち自身の カスタムプラグイン ：）でそれをどのように実装しているかです。

<?php
/*
Plugin Name: My Favicon Plugin
Description: Activating a favicon into my site.
*/

function add_my_favicon() {
    $favicon_path = plugins_url( '/favicon.ico', __FILE__ );    

    echo '<link rel="shortcut icon" href="' . esc_url($favicon_path) . '" />';
}


add_action( 'wp_head', 'add_my_favicon' ); //front end
add_action( 'admin_head', 'add_my_favicon' ); //admin end

ファイルをmy-favicon.phpという名前でフォルダーに保存し、favicon.icoファイルをそのフォルダー内に置きます。フォルダにmy-faviconという名前を付け、それを/wp-content/plugins/内に置きます。今すぐあなたのWordPressの管理パネルに入って、あなたのfaviconが動作しているのを見るためにプラグインをアクティブにしてください。 :)

アップルタッチアイコン

さらにこれらの方法で、Apple Touchアイコンを実装することもできます。

Apple touchアイコンの寸法は129px x 129pxです。 :)

7
Mayeenul Islam

このスレッドで返信するには遅すぎます。しかしそれは将来誰かを助けるかもしれないかもしれません。

その後、Wordpressの管理パネルに行きます。

外観>>カスタマイズ>>サイトID

今すぐアイコンをアップロードします。

2
Usman Siddiqui