Cum să adaug favicon pe site - atât în front-end cât și în panoul de administrare

Question

Cum să adaug favicon pe site - atât în front-end cât și în panoul de administrare

16 mar. 2014, 07:41:59

Vizualizări: 16.5K

Voturi: 8

Cum pot adăuga un favicon pe site-ul meu WordPress, atât în partea de front-end, cât și în panoul de administrare. Am încercat mai multe metode, dar fără succes.

Știu că pentru a afișa favicon-ul codul este:

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

Cum pot implementa acest lucru?

Mayeenul Islam

12.9K

pluginuri teme favicon

Toate răspunsurile la întrebare

Comentarii

Răspuns corect. Acest lucru va ajuta mulți oameni. Folosesc acest cod în propriul meu plugin de ceva timp.

Pieter Goosen

16 mar. 2014 07:56:04

Acest răspuns merită cu siguranță mai multe voturi pozitive.

Smokey

16 oct. 2014 08:05:02

Răspuns grozav, cu excepția faptului că ar trebui să folosești get_stylesheet_directory_uri(), nu get_template_directory_uri() pentru temele copil! :)

Eric Holmes

30 oct. 2015 23:00:30

@EricHolmes De fapt, am vrut să spun așa, dar am înțeles acum, poate fi confuz, așa că am corectat. Mulțumesc pentru comentariu. :)

Mayeenul Islam

31 oct. 2015 17:18:28

Răspund prea târziu la acest subiect. Dar poate va ajuta pe cineva în viitor.

Accesează Panoul de Administrare WordPress, apoi:

Apariție » Personalizează » Identitatea site-ului

Acum încarcă o pictogramă.

Usman Siddiqui

41

4 dec. 2016 09:01:33

Comentarii

da, această funcționalitate a fost adăugată în versiunea 4.4 IIRC

Mark Kaplun

4 dec. 2016 09:09:24

hmm, asta nu știam :)

Usman Siddiqui

5 dec. 2016 10:42:54

Cu versiunile recente de WordPress, aceasta este probabil cea mai bună metodă.

João Teixeira

28 mar. 2022 10:04:43

Mayeenul Islam 12.9K · Accepted Answer · 2014-03-16T07:41:59Z

Actualizare

Următoarea soluție este necesară pentru utilizatorii care folosesc WordPress mai vechi de versiunea 4.4. Dacă utilizați WordPress v4.4+ atunci nu aveți nevoie de o soluție atât de complexă. Pur și simplu urmați răspunsul lui Usman Siddiqui, și este atât de ușor.

Răspunsul Actual

Puteți adăuga un favicon pe site-ul dvs. WordPress în două moduri:

prin Temă, sau
prin Plugin

Pregătire

Pentru a adăuga un favicon, mai întâi trebuie să creați unul. Favicon-urile au de obicei dimensiunile:

16px x 16px, sau
32px x 32px.

Deci, mai întâi, creați unul folosind un software grafic și salvați fișierul cu numele 'favicon' în formatul .png (pentru transparență) sau .jpg etc. Redenumiți fișierul și schimbați extensia în .ico (fișier icon) - astfel fișierul dvs. va fi favicon.ico.

Prin temă:

Cod Hardcodat

Pentru a implementa favicon folosind tema, trebuie să țineți cont că utilizați WordPress și trebuie să o faceți în modul WordPress, iar pentru a afișa calea exactă a fișierului, trebuie să folosiți get_template_directory_uri() pentru tema părinte, sau get_stylesheet_directory_uri() pentru temele copil. Deci, codul pentru implementarea favicon-ului ar fi (unde fișierul favicon.ico este stocat într-un folder numit "images" în interiorul folderului temei):

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

Puteți plasa blocul de cod de mai sus între <head> și </head> din tema dvs. pentru ca favicon-ul să funcționeze.

Cod Dinamic

Pentru a implementa favicon-ul într-un mod dinamic, folosiți următorul cod:

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

Am folosit același cod, dar acum l-am încorporat într-o funcție pentru a declanșa acțiunea. Apoi am adăugat acțiunea folosind două hook-uri:

wp_head — va afișa favicon-ul pe frontend folosind funcția WordPress wp_head() în secțiunea head a temei dvs.
admin_head — va afișa favicon-ul în panoul de administrare

Prin plugin

Puteți crea propriul plugin pentru a seta favicon-ul pe site-ul dvs. Ar fi mai bine pentru că, chiar dacă schimbați tema site-ului, favicon-ul nu se va pierde. Iată cum îl implementăm cu propriul nostru plugin personalizat:

<?php
/*
Plugin Name: My Favicon Plugin
Description: Activarea unui favicon pe site-ul meu.
*/

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

Salvați fișierul cu numele my-favicon.php într-un folder și plasați fișierul favicon.ico în acel folder. Denumiți folderul my-favicon și puneți-l în interiorul /wp-content/plugins/. Acum intrați în panoul de administrare WordPress și activați plugin-ul pentru a vedea favicon-ul în acțiune. :)

Apple Touch Icon

În plus, prin aceste metode, puteți implementa și un Apple Touch icon:

Implementarea unui Apple Touch Icon de helgatheviking — WordPress Development

Dimensiunea unui Apple touch icon este 129px x 129px. :)