Home > Wordpress > Egyéni widget beillesztése wordpress sablonba

Egyéni widget beillesztése wordpress sablonba

2010, 03. 01. | codeart | Wordpress | Komment (15)

Aki wordpress blogot használ, annak ismerős lehet az a kifejezés, hogy widget. Az oldalsávban, footerben vagy más helyen lévő kis kiegészítő alkalmazások ezek, melyek plusz funkciókkal gazdagítják az oldalunkat. Kitehetünk például egy keresődobozt vagy kilistázhatjuk a kategóriákat, de akár html vagy php tartalmat is megjeleníthetünk a segítségükkel.

Ilyen alkalmazásokat bárhová tehetünk az oldalon belül, ennek módját fogom most bemutatni.

Cikkünk a hirdetés után folytatódik!

A művelet két lépésből áll. Az első a functions.php fájl módosítása. Definiálnunk kell az új területet a widgetek számára.
A második lépés elhelyezni az újonnan definiált widget box kódját abban a fájlban ahol meg szeretnénk jeleníteni pl.(sidebar, footer, vagy bármilyen tetszőleges helyen.)

Ezt követően a wordpress adminból elérhetővé válik a Megjelenés/Widgetek menüpontban. De lássuk csak részletesebben.

Megjelenés / Widgetek

Megjelenés / Widgetek

1. lépés – Widget definiálása

Nyissuk meg a sablonunk könyvtárában található functions.php nevű fájlt. Adjuk hozzá a következő kódot.

1
2
3
4
5
6
7
8
9
10
11
12
13

if (function_exists('register_sidebar')) {
 
	register_sidebar(array(
		'name' => 'Widget Neve',
		'id'   => 'widgetized-area',
		'description'   => 'Rövid leírás.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));
 
}

Ez a kód leellenőrzi, hogy engedélyezettek e a widgetek a wordpress verziódnál. Ha igen definiál egy újat a fenti adatokkal.

Magyarázat:
  • name – a widget neve, amely a wp adminban jelenik meg
  • id – az azonosítója
  • description – rövid leírása
  • before_widget – A html teg, amely megnyitja a widgetet, jelen esetben egy div
  • after_widget – widget div záró teg
  • before_title – html teg a widget címe előtt, jelen esetben H4
  • after_title – cím záró teg

Tehát, ezekkel a beállításokkal a következő lesz a végeredmény html-ben. Jelen esetben a keresőt jelenítenénk meg.

1
2
3
4
5
6
7
8
9
10

<div id="search-3" class="widget widget_search">
	<h4>Keresés</h4>
	<form role="search" method="get" id="searchform" action="http://localhost/283/" >
		<div>
			<label class="screen-reader-text" for="s">Keresés erre:</label>
			<input type="text" value="" name="s" id="s" />
			<input type="submit" id="searchsubmit" value="Keresés" />
		</div>
	</form>
</div>
1
2

'before_widget' => '<div id="%1$s" class="widget %2$s">', //ebből
<div id="search-3" class="widget widget_search"> //ez lesz

2. lépés – Kód elhelyezése az oldalon

A második lépésben elhelyezzük az imént definiált terület kódját az oldal azon részén, ahol szeretnénk, hogy megjelenjenek a widgetek.

1
2
3
4
5
6
7
8
9
10
11
12

<div id="widgetized-area">
 
	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('widgetized-area')) : else : ?>
 
	<div class="pre-widget">
		<p><strong>Widget terület</strong></p>
		<p>A panel aktív és kész rá, hogy widgeteket helyezzenek el rajta a Wordpress Adminból.</p>
	</div>
 
	<?php endif; ?>
 
</div>

Ha megvagyunk a WordPress Adminban fel tudjuk tölteni a területet widgetekkel a Megjelenés/Widgetek menüpontban.
Természetesen a css beállításokat végezzük el a saját ízlésünk szerint.

Több widget beillesztése

Lehetőség ban több terület definiálására is, méghozzá a következő módon. A művelet ugyanaz mint az imént csak többször hajtjuk végre.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

if (function_exists('register_sidebar')) {
 
	register_sidebar(array(
		'name' => 'Fejléc',
		'id'   => 'header',
		'description'   => 'Rövid leírás.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));
	register_sidebar(array(
		'name' => 'Oldalsáv',
		'id'   => 'sidebar',
		'description'   => 'Rövid leírás.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));
	register_sidebar(array(
		'name' => 'Lábléc',
		'id'   => 'footer',
		'description'   => 'Rövid leírás.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));
 
}

…és a terület elhelyezéséhez szükséges kód:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<div id="widgetized-header">
 
	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header')) : else : ?>
 
	<div class="pre-widget">
		<p><strong>Fejléc</strong></p>
		<p>A panel aktív és kész rá, hogy widgeteket helyezzenek el rajta a Wordpress Adminból.</p>
	</div>
 
	<?php endif; ?>
 
</div>
<div id="widgetized-sidebar">
 
	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?>
 
	<div class="pre-widget">
		<p><strong>Oldalsáv</strong></p>
		<p>A panel aktív és kész rá, hogy widgeteket helyezzenek el rajta a Wordpress Adminból.</p>
	</div>
 
	<?php endif; ?>
 
</div>
<div id="widgetized-footer">
 
	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('footer')) : else : ?>
 
	<div class="pre-widget">
		<p><strong>Lábléc</strong></p>
		<p>A panel aktív és kész rá, hogy widgeteket helyezzenek el rajta a Wordpress Adminból.</p>
	</div>
 
	<?php endif; ?>
 
</div>

Kapcsolódó oldalak

Ajánlanék még pár külföldi oldalt is, amelyek szintén ezzel a témával foglalkoznak és érdemes meglátogatni őket.

Zárszó

Remélem érthető volt a leírás mindenki számára, ha esetleg kérdésetek lenne a módszerrel kapcsolatban tegyétek fel bátan egy kommentben.

Szerző:

A codeART 2009-ben alakult és azóta gyűjt inspiráló cikkeket és publikál design és webfejlesztés témában érdekes és hasznos leírásokat.

, ,

15 Hozzászólás

  1. Pali

    10.09.02
    00:15

    Nem tudom hogy lehet a formaba beszurni gordítősávot. Weboldalamon az online megrendeleseknel egyszerűen nem tudok gordítősávot létrehozni. HELP.

  2. codee47

    10.09.02
    11:36

    Szia!

    Tedd a form-ot egy iframe-be, az automatikusan létrehozza neked ha fix magasságot adsz neki.

  3. Briák Pál

    10.09.02
    20:41

    SZia,

    Megcsináltam de sajnos nem tesz be gördítősavót a jobb oldalába. A tartalom meg sokkal több mint amit a beszúrás helye ad. Tehát lejjebb lesz a beszúrt tartalom. Kellene a g9rditősáv. AZ iframeba meg nem csinál semmit nekem. Lehet hogy bugos a program? THX

  4. codee47

    10.09.14
    09:08

    Természetesen ha a scrolling=”no” beállítást használod akkor nem fog scrollozni. Írd át yes-re úgy működni fog.

  5. Briák Pál

    10.09.14
    09:14

    Köszönöm kipróbálom…

  6. gricso

    10.11.11
    05:10

    A több widgetnél nem register_sidebars van sidebar helyett? A megfelelő számozással?

  7. codee47

    10.11.11
    10:46

    Szia!

    Nekem így is működik tökéletesen de igazad van, létezik a többesszámú változat is.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    <?php
 
add_action( 'widgets_init', 'my_register_sidebars' );
 
function my_register_sidebars() {
 
	/* Elsődleges 'primary' oldalsáv. */
	register_sidebar(
		array(
			'id' => 'primary',
			'name' => __( 'Elsődleges' ),
			'description' => __( 'Az oldalsáv leírása.' ),
			'before_widget' => '<div id="%1$s" class="widget %2$s">',
			'after_widget' => '</div>',
			'before_title' => '<h3 class="widget-title">',
			'after_title' => '</h3>'
		)
	);
 
	/* További register_sidebar() oldalsávok hozzáadása. */
}
 
?>

    …és a megjelenítése

    1
2
3
4
5

    <div id="sidebar-primary" class="sidebar">
 
	<?php dynamic_sidebar( 'primary' ); ?>
 
</div>

    Köszi az észrevételt!

  8. gricso

    10.11.13
    04:12

    Szia!

    Bocsi, csak azért kérdeztem rá, mert nekem volt, hogy már nem működött több widgetnél a megoldásod, csupán a register_sidebars-al. De volt, hogy működött is. Nem tudom, hogy valójában mi lehetett a hiba… csak érdekelt, hogy hátha te tudsz arról valamit, hogy mi lehet a különbség a két megoldás között. Vagy különbségek helyett csupán alternatívák?

  9. Reder

    11.10.07
    18:24

    Szia!

    Kipróbáltam mindenhogy, de sehogy nem akar megjelenni a widget az oldalon.
    A widget menü alatt megjelenik a létrehozott box, be is tudom húzni a widgeteket, de azon az oldalon ahol használni szeretném, a kód beillesztése után, csak a szöveg olvasható, hogy készen áll a widgetek elhelyezésére, de a widget sehol. Mindenhogy próbáltam, de sehogy se jó. Mit ronthattam el?

    Előre is köszi!

  10. codeart

    11.10.07
    22:34

    A functions.php-ban definiált oldalsáv id-ja és a oldalon elhelyezett kódban szereplő paraméter megegyezik?

    A cikkben ez “widgetized-area”

  11. Reder

    11.10.12
    18:23

    Igen, egyezik. Százféleképpen próbáltam, de csak nem akar megjelenni. Lehet, hogy a téma sajátosságai miatt? Már nem tudok mire gondolni…

  12. codeart

    11.10.15
    10:57

    Azt javaslom próbáld ki a default sablonnal. Ha azzal megy, akkor a sablonoddal lesz a gond.

  13. Adi

    11.10.26
    18:58

    Szia ! Sajnos nem nagyon igazodok el ! Én a chat boxot /Schreikasten/ szertném betenni egy oldlalba ! Ennek az az oka , hogy telefonnal mobil módban nem jelenik meg az oldalsáv ami nem is baj de a chat az szükséges lenne és oldalként meg tudom jelentetni ! Nagyon fontos lenne és nagyon megköszönném ha tudnál segíteni !

    Üdv : Adi

  14. codeart

    11.10.26
    20:06

    Szia, ha a tópart.hu-ról van szó, nekem megjelenik a chat widget Androidon (2.3). Természetesen miután átváltottam a mobil nézetről. IOS-en próbáltad?

  15. Adi

    11.10.27
    10:02

    Szia ! Ahogy lenni szokott a segítség kérés utánn 1 órával megtaláltam a megoldást ! Oldalba beillesztve megjelenik a chat box az alábbi kóddal [sk-shoutbox]

    Köszönöm , hogy megnézted !

    Adi

Szólj hozzá!

Használható tag-ek:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

Kérünk ne használd a kommentedet linkelésre, reklámozásra, spammelésre! Csak, tartalomhoz kapcsolódó linkeket kérünk!