Genesis Framework este o temă populară WordPress care a fost folosită pentru a crea unele dintre cele mai frumoase și mai creative site-uri web de pe internet. Este unul dintre preferatele noastre aici, la Blogging for Entrepreneurs, deoarece este atât de versatil, ușor de utilizat și personalizabil.
Un lucru pe care mulți oameni îl consideră dificil la temele Genesis este adăugarea unui logo pentru imaginea antetului. Din fericire, cu doar câteva clicuri puteți avea propriul logo personalizat.
Acest lucru este util dacă doriți ca site-ul dvs. să aibă un branding specific care se potrivește afacerii dvs. Procesul de adăugare a acestuia durează mai puțin de 10 minute și necesită utilizarea unui singur plugin, care se numește Custom Logo Uploader de către WPSquare.
Poate fi instalat în doar câteva secunde cu un singur clic în interiorul panoului de administrare WordPress.
Iată pașii:
1) Instalați pluginul
2) Adăugați imaginile dorite
3) Configurați setările
4) Salvați modificările 5-10 minute mai târziu, reveniți la Setări teme Genesis Child > Imagine antet
6) Selectați un logo personalizat
7) Introduceți adresa URL dorită
8) Salvați modificările.
Cum să adăugați sigla imaginii antet pentru tema Genesis Child-
PASUL 1: Configurați sigla în tabloul de bord
Din moment ce folosesc „Tema Douăzeci și zece copii„, tot ce trebuie să fac este să merg la Dashboard >> Aspect >> Personalize>> Header și să adaug un logo pe care vreau să îl folosesc. Puteți adăuga propriile imagini personalizate sau alege dintre cele disponibile în WordPress, pe care le puteți găsi în secțiunea „Adăugați nou”.
În cazul meu, voi adăuga o imagine din folderul Media Dashboard făcând clic pe fișierul numit „header-logo.png”.
PASUL 2: Adăugați cod personalizat la funcția Genesis Child Theme.
php Deschideți fișierul php al funcției temei Genesis Child, care se află de obicei în folderul rădăcină al temei numit functions.php . Puteți deschide acest fișier folosind orice client FTP sau SFTP, cum ar fi Filezilla.
Și dacă nu găsiți acest fișier, puteți crea unul. Am scris o postare pentru a arăta cum să creez fișierul php al funcției temei copil Genesis.
Iată codul pe care l-am adăugat la sfârșitul fișierului functions.php, dar înainte de a închide eticheta PHP?>
// Sigla antet BP
add_custom_image_header('bp-logo');
Aceasta îi spune lui Genesis să folosească o imagine numită „bp-logo” ca sigla antet pentru site-ul meu. Puteți schimba acest nume, dar nu uitați să îl schimbați și la pasul următor. Acum creați un nou folder cu numele bp-logo .
Trebuie creat în directorul rădăcină al temei. Pentru mai multe informații, verificați postarea mea despre cum să creați un folder în tema Genesis child.
PASUL 3: Creați o imagine de siglă pentru tema unei terțe părți
Problema este că imaginea logo-ului nostru nu va apărea în secțiunea de personalizare a tabloului de bord WordPress, dar tot se va afișa în frontend odată ce site-ul este publicat online.
Înseamnă că trebuie să adăugăm această imagine la header.php al temei noastre. Din fericire, putem face acest lucru prin editarea noastră temă direct din zona de administrare WordPress.
Ceea ce aveți nevoie este fișierul zip cu tema și clientul FTP sau SFTP FileZilla . Puteți folosi phpMyAdmin de asemenea, dacă știi să-l folosești.
Deschideți arhiva zip folosind programul preferat și accesați /wp-content/themes/YOUR THEME NAME/header.php . Copiați codul pe care îl vedeți în acest fișier, dar înainte de a închide tag-ul PHP ?> .
PASUL 4: Adăugați cod personalizat la antetul temei Genesis Child.
php Acum, deschideți fișierul header.php al temei (care se află în /wp-content/themes/YOUR THEME NAME/) și adăugați acest cod înainte de a închide eticheta PHP (care se află la sfârșitul fișierului):
PASUL 2: Efectuat Acum, dacă vă vizitați site-ul web, logo-ul va apărea în frontend.
Dar există o problemă cu acest cod. Acesta creează un fișier imagine pe serverul dvs. și dacă încărcați o mulțime de imagini, va ocupa spațiu pe server în mod inutil.
Deci, pentru a rezolva această problemă, am folosit pluginul meu numit „Genesis Simple Hooks”. Și aici este codul personalizat actualizat pe care l-am adăugat în fișierul functions.php: add_action( 'genesis_before_header', 'bp_add_header_logo');
Pași de bază pentru a adăuga anteturi personalizate pentru blogul WordPress
1) Accesați Tabloul de bord al blogului dvs. WordPress și plasați cursorul peste Aspect. Selectați Meniuri de acolo.
2) Faceți clic pe Antetul #1 din meniul drop-down Genesis Simple Headers. Se va deschide o nouă pagină cu o mulțime de opțiuni. Puteți modifica oricare dintre opțiunile oferite acolo.
3) Prima opțiune este Imagine antet. Faceți clic pe butonul de răsfoire și selectați o imagine de pe computer sau utilizați una dintre imaginile implicite disponibile în această secțiune.
Asigurați-vă că aveți permisiunea de a utiliza acea imagine, deoarece va fi afișată ca parte a dvs pe blog-ul de conținut și va apărea și în rezultatele căutării. Puteți folosi aceeași imagine pentru toate cele trei imagini de antet, dacă doriți. De asemenea, puteți modifica textul afișat în acea secțiune.
4) Al doilea meniu derulant este Tip antet. Există 5 tipuri oferite de acest plugin și puteți alege oricare dintre ele. Cu toate acestea, schimbarea tipului la H1 vă va ajuta să îl stilați în continuare ca antet H1.
5) Al treilea meniu derulant este Poziționare și îl poți folosi pentru a schimba poziționarea antetului imagine pe blogul tău (stânga, centru sau dreapta).
6) Cu al patrulea meniu drop-down, puteți alege ce secțiune a postărilor ar trebui să fie afișată în acel antet. Aveți 3 secțiuni – Imagine prezentată Genesis, Text introductiv și Titlul postării. Dacă doriți să afișați altceva, puteți introduce acel cod HTML în secțiunea furnizată și va apărea acolo.
7) Faceți clic pe Meniu Salvare după ce ați făcut toate modificările.
8) Noua imagine de antet va fi afișată imediat pe blogul dvs. și ori de câte ori un vizitator deschide oricare dintre postările de pe blog, această imagine de antet va apărea în partea de sus. Cu toate acestea, îi puteți schimba poziția la dreapta sau la stânga accesând Aspect – Personalizare – Navigare laterală și apoi selectând dreapta sau stânga.
Editarea fișierului Style.css al temei Genesis Child-
Am dat peste o temă copil Genesis numită [i]Element[/i] în directorul oficial de teme WordPress și am vrut să o folosesc în mediul meu de dezvoltare locală.
Prima și a doua postare de pe acest site oferă instrucțiuni despre cum să configurați o nouă temă pentru copii geneza în scopuri de dezvoltare. Deci, du-te să le verifici dacă nu ai făcut-o deja.
După ce am încercat să rulez scriptul de instalare găsit în prima postare, mi-am dat seama că a instalat o foaie de stil pentru temă copil într-un director numit „_s”, care este corect pentru toate temele WordPress, cu excepția Genesis.
Apoi editez fișierul cu tema copil style.css și am schimbat căile din „Element Child Theme/style.css” în „Element Child Theme/*/style.css”.
Și chiar funcționează!
Link-uri rapide
- De ce un logo este important pentru afacerea dvs
- Elemente esențiale ale blogului pe care nu trebuie să le ratați ca începători
- Aflați acum, cum să vă îmbunătățiți marketingul în rețelele sociale?
- Colecția mea de teme WordPress preferate din toate timpurile
Concluzie - Cum să adăugați logo-ul imaginii antet pentru tema Genesis Child 2024
Genesis Framework este una dintre cele mai populare teme WordPress disponibile. Este ușor de personalizat și vine cu o mulțime de funcții care vă pot ajuta să vă demarați afacerea.
O modalitate de a vă personaliza site-ul web este prin adăugarea unui logo imagine antet pentru Tema Genesis Child, care va apărea în locul textului implicit „Genesis Framework” în partea de sus a fiecărei pagini.
Blogurile sunt o modalitate excelentă de a vă împărtăși cunoștințele, de a vă promova produsul sau serviciul și de a construi un public. Dar cum procedați pentru a le proiecta?
Există multe teme diferite de blog care pretind a fi cele mai bune pentru a crea site-uri web frumoase, dar care este potrivit pentru tine? Am luat unele dintre cele mai populare șabloane de temă Genesis Child disponibile astăzi și am clasat calitatea designului lor de la 1 la 5 stele pe baza propriilor preferințe personale.