Cum să adăugați o bară de căutare în meniul WordPress

Publicat: 2023-08-17

Căutarea de conținut pe site-ul dvs. nu ar trebui să fie o vânătoare de comori. Imaginați-vă o bară de căutare care arată exact ceea ce caută cititorii fără să faceți clic și să derulați fără sfârșit.

Gândiți-vă la site-ul dvs. ca la un centru uriaș de informații, iar vizitatorii au nevoie de o modalitate rapidă de a găsi ceea ce caută. Aici intervine o bară de căutare . Puteți alege dintre opțiunile încorporate sau vă puteți personaliza pe propria dvs. folosind pluginuri.

Adăugarea unei bare de căutare în WordPress este ușoară; Vă voi arăta pas cu pas. Alăturați-vă nouă pentru a îmbunătăți gradul de utilizare a site-ului și pentru a vă asigura că vizitatorii găsesc ceea ce au nevoie.

Sunteți gata să vă faceți site-ul mai ușor de utilizat? Să vă arătăm cum să adăugați o bară de căutare în meniul WordPress .

Conținutul ascunde
1 Cum să adăugați o bară de căutare în WordPress
1.1 Adăugați bara de căutare în meniul WordPress fără plugin
1.1.1 Pasul 1: Obțineți o temă cu un generator de antet
1.1.2 Pasul 2: Accesați Personalizatorul temei
1.1.3 Pasul 3: Adăugați căutare în meniul WordPress
1.1.4 Personalizarea elementului de căutare
1.2 Adăugați bara de căutare cu un plugin pentru bara de căutare WordPress
1.2.1 Pasul 1: Instalați și activați PostX
1.2.2 Pasul 2: Activați suplimentul pentru șabloane salvate
1.2.3 Pasul 3: Adăugați un bloc de căutare la un șablon salvat
1.2.4 Pasul 4: Copiați codul scurt
1.2.5 Pasul 5: Adăugați bara de căutare în meniul WordPress
1.2.6 Pasul 6: Personalizări după publicare
2 resurse pe care le veți iubi
3 Încheierea

Cum să adăugați o bară de căutare în WordPress

WordPress oferă widget-uri de căutare native, iar pluginurile pot îmbunătăți această caracteristică și mai mult. V-am acoperit cu îndrumări pas cu pas și imagini vizuale pentru ambele metode.

Adăugați bara de căutare în meniul WordPress fără plugin

Dacă căutați „ Cum să adăugați bara de căutare în meniul WordPress fără plugin ” pe Google, veți găsi multe articole. Dar toți vor pretinde că adaugă o bară de căutare în meniu. Cu toate acestea, veți găsi un tutorial sau un ghid pentru adăugarea unei bare de căutare în bara laterală folosind secțiunea implicită de widget-uri a WordPress.

Dar te-am luat cu spatele!

Adăugarea unei bare de căutare în meniul WordPress este ușoară dacă utilizați o temă cu un generator de antet. Pentru acest tutorial, voi folosi tema „Blocksy”, una dintre temele mele preferate. Puteți obține asta gratuit din secțiunea Teme WordPress.

Pasul 1: Obțineți o temă cu un generator de antet

Accesați Tabloul de bord WordPress > Teme . Apoi faceți clic pe „ Adăugați nou ”.

Puteți încărca propria temă făcând clic pe butonul „ Încărcați tema ”. Sau puteți căuta colecția de teme gratuite.

Activate Blocksy Theme
Activați tema Blocksy

Căutați „ Blocksy ” sau orice alte teme cu o opțiune de generare a antetului. Apoi, instalați și activați-l. Tema mea Blocksy este deja activată, deoarece o folosesc în mod constant, așa cum am menționat mai devreme.

Pasul 2: Accesați Personalizatorul temei

Acum faceți clic pe „ Personalizați ” în tema activată.

Blocksy Theme Customizer
Personalizator de teme Blocksy

Sau, puteți accesa Tabloul de bord WordPress > Aspect > Personalizare .

Acum, veți vedea câteva opțiuni de personalizare. Dar trebuie să selectați „ Header ” deoarece meniul/bara de meniu este secțiunea antet din WordPress.

Pasul 3: Adăugați căutare în meniul WordPress

În această secțiune, veți vedea 3 rânduri: Sus, Principal și Jos. Vă sugerez să folosiți rândul principal pentru a vă alinia mai mult cu categoriile de meniu.

Add Search to WordPress Menu
Adăugați căutare în meniul WordPress

Acum, trageți și plasați elementul de căutare pe rândul principal . Și veți vedea o pictogramă de căutare adăugată în meniu.

Acum, faceți clic pe „ Publicare ” pentru a adăuga cu succes o bară de căutare în meniul WordPress.

Personalizare element de căutare

Veți vedea opțiuni de personalizare de bază când faceți clic pe elementul de căutare adăugat.

Search Element Customization
Personalizare element de căutare

Aceasta include:

  • Dimensiunea pictogramei
  • Vizibilitatea etichetei
  • Poziția etichetei
  • Textul etichetei
  • Setări de bază legate de culoare

Puteți să-l personalizați și să apăsați pe Publicare pentru a-l face live.

Publish Search Bar Without Plugin
Publicați bara de căutare fără plugin

Acum, să vedem vizualizarea frontală a barei de căutare din meniul site-ului web.

Add Search Bar to WordPress Menu Without Plugin
Adăugați bara de căutare în meniul WordPress fără plugin

Sunteți uimit de acest aspect al paginii de pornire ? Acest lucru a fost realizat cu PostX Dynamic Site Builder. Asigurați-vă că verificați asta!

Dynamic Site Builder

Adăugați bara de căutare cu un plugin pentru bara de căutare WordPress

Acum, doriți cel mai rapid mod de a adăuga o bară de căutare personalizată la bara de meniu? Dacă aveți PostX. Blocul de căutare avansată PostX vă permite să adăugați o bară de căutare complet personalizată în meniul WordPress.

Doar urmați acești pași simpli pentru a-l adăuga cu PostX.

Pasul 1: Instalați și activați PostX

Pentru a adăuga o bară de căutare personalizabilă în meniul WordPress, trebuie să instalați și să activați pluginul PostX .

Installing PostX
Instalarea PostX

Pentru a instala și activa PostX, accesați Plugins > Add New , căutați PostX și finalizați procesul de instalare.

Odată ce pluginul este activat, puteți folosi șablonul salvat și Blocul de căutare pentru a adăuga căutare în meniul WordPress.

Pasul 2: Activați suplimentul pentru șabloane salvate

Acum trebuie să activați suplimentul Saved Template.

Saved Templates Addon Enabled
Șabloane salvate Addon activat

Accesați PostX > Addons. Apoi, activați suplimentul Saved Template folosind bara de comutare.

Șablonul salvat PostX creează un cod scurt pentru dvs., pe care îl puteți utiliza pentru a adăuga o bară de căutare în antetul site-ului dvs.

Pasul 3: Adăugați un bloc de căutare la un șablon salvat

Pentru a căuta în bara din meniu, trebuie să creați un șablon salvat cu PostX.

Accesați PostX > Șabloane salvate și faceți clic pe „ Adăugați un șablon nou ” pentru a crea un șablon nou. Nu uitați să-l denumiți dacă doriți să îl personalizați mai târziu.

Create New PostX Saved Template
Creați un nou șablon PostX salvat

Apoi, adăugați Blocul de căutare PostX în pagină.

Add Search Block in Saved Template
Adăugați bloc de căutare în șablonul salvat

Îl puteți personaliza așa cum doriți. Pentru a evita problemele de personalizare, puteți să importați șabloane prefabricate cu 1 clic făcând clic pe butonul „ Modele predefinite ”.

PostX Search Customization Options
Opțiuni de personalizare PostX Search

După ce ați realizat personalizarea, faceți clic pe „ Publicați ” și șablonul salvat este gata.

Pasul 4: Copiați codul scurt

Reveniți la pagina șablonului salvat ( PostX > Șabloane salvate ) pentru a copia codul scurt.

Copy Shortcode for Search Template
Copiați codul scurt pentru șablonul de căutare

Veți găsi un cod scurt pentru șablonul pe care tocmai l-ați creat. Faceți clic pe el pentru a-l copia și urmați pașii următori.

Pasul 5: Adăugați bara de căutare în meniul WordPress

Acum, accesați Tabloul de bord WordPress > Aspect > Personalizare . Așa cum v-am arătat când adăugați bara de căutare implicită.

Blocksy Theme Customizer
Personalizator de teme Blocksy

Acum, trageți și plasați elementul HTML pe rândul principal. Și faceți clic pe el după adăugare.

Add HTML Element in Main Row
Adăugați element HTML în rândul principal

Veți vedea un câmp de text în secțiunea de editare HTML . Trebuie doar să lipiți codul scurt copiat în caseta de text . Și veți vedea o bară de căutare în secțiunea de meniu WordPress, tocmai cea pe care ați creat-o în șablonul salvat.

Paste Copied Shortcode for Search Template
Lipiți codul scurt copiat pentru șablonul de căutare

Acum, apăsați pe Publicare pentru a-l face live.

Să vedem vizualizarea frontală după adăugarea barei de căutare în meniul WordPress folosind PostX.

Add Search Bar With a WordPress Search Bar Plugin
Adăugați bara de căutare cu un plugin pentru bara de căutare WordPress

Pasul 6: Personalizări după publicare

Există un secret uimitor al șablonului salvat PostX. Se sincronizează automat pe pagina live. Să presupunem că personalizați și actualizați șablonul salvat (constând din blocul de căutare). În acest caz, modificările vor fi sincronizate automat și nu va trebui să parcurgeți fiecare pas din nou și din nou.

Cu blocul PostX Advanced Search, veți obține următoarele opțiuni de personalizare:

  • AJAX Search Enabler
  • Setări pentru stilul formularului de căutare
  • Activați Căutare pop-up
  • Setări butonul de căutare
  • Setări pentru rezultatele căutării
  • Mai multe setări pentru rezultate
  • Setări text, tipografie și culoare
  • Setări pentru Margini/Umplutură și Aliniere
    Și altele…

Crezi că e prea puțin? Nu ratați documentația noastră extinsă a blocului de buton de căutare și veți fi uimit de cât de esențiale detalii puteți personaliza în blocul de căutare.

Căutați documentația blocului

Oh, este un buton? Știți, PostX are și un Button Block personalizat? Nu? Asigurați-vă că verificați blocul grupului de butoane PostX .

Resurse pe care le veți iubi

Iată câteva articole pentru a verifica funcțiile PostX, sunt sigur că vă vor fi de ajutor:

  • Cum să adăugați fonturi personalizate WordPress: Preluați controlul deplin asupra tipografiei
  • Cum se creează puncte de marcare WordPress cu PostX Advanced List Block
  • Vă prezentăm PostX ChatGPT Addon: Generatorul de conținut WordPress AI
  • PostX Dynamic Site Builder: Construiește-ți site-ul în câteva clicuri
  • Cum să afișați videoclipuri WordPress ca imagine recomandată cu PostX

Încheierea

Acest ghid cuprinzător a oferit o foaie de parcurs pas cu pas pentru a adăuga bara de căutare în meniul WordPress cu sau fără pluginuri. Opțiunile dvs. sunt extinse și accesibile, de la utilizarea temelor cu generatori de antete până la explorarea lumii blocului de căutare avansată PostX. Creați, personalizați și organizați în orice moment, fără bătăi de cap!

Puteți consulta tutoriale video WordPress pe canalul nostru YouTube. De asemenea, găsiți-ne pe Facebook și Twitter pentru actualizări regulate!

Vă place acest articol? Imprastie vestea
  • WooCommerce Related Products

    3 tipuri de produse legate de WooCommerce

  • How to Display Custom Taxonomy in Gutenberg Editor Perfectly 1

    Cum să afișați perfect taxonomia personalizată în Gutenberg Editor

  • Introducing Taxonomy Blocks for Creating Custom Taxonomy List and Grid for Gutenberg 2

    Introducerea blocurilor de taxonomie pentru crearea listei de taxonomie personalizate și a grilei pentru Gutenberg

  • How to Display and Customize WooCommerce On Sale Products

    Cum să afișați și să personalizați produsele WooCommerce On Sale