WordPress Shortcode (osnove)

Uvod

WordPress shortcode na nekoj stranici ili postu će biti zamenjen sa nekim sadržajem, a proces koji se u pozadini desio je sledeći:

Kada WordPress “naleti” na shortcode njemu se daje instrukcija da potraži makro izmadju zagrada [ ], zatim makro pozove callback funkciju koja će zameniti shortcode sa nekim dinamičkim sadržajem.

Omogućiti shortcode svuda

Po defaultu WordPress ignoriše shortcode ako ga nadje na nekom drugom mestu a da to nije deo gde se unosi sadržaj posta ili strane. Da bi aktivirali shortcode i u drugim oblastima potrebno je dodati adekvatni filter u functions.php

Shortcode u widget-u

add_filter('widget_text', 'do_shortcode');

1	add_filter('widget_text', 'do_shortcode');

Sada je dovoljno staviti shortcode u običan Text widget a njega u oblast koju želite da bi se prikazao sadržaj shortcode.

Shortcode u komentarima

add_filter( 'comment_text', 'do_shortcode' );

1	add_filter( 'comment_text', 'do_shortcode' );

Shortcode u excerpt-e

add_filter( 'the_excerpt', 'do_shortcode');

1	add_filter( 'the_excerpt', 'do_shortcode');

Shortcode u oviru teme

Ukoliko iz nekog razloga želimo da ubacimo shortcode unutar nekog šablona ili plugin-a, npr. “custom page template” koristimo funkciju do_shortcode( $content )

Primer

Na mesto unutar koda gde želimo da se pojavi shortcode dodamo sledeći kod:

<?php echo do_shortcode("[naziv_shortcode]");

1	<?php echo do_shortcode("[naziv_shortcode]");

Primer

Ako je shortcode sa otvarajućim i zatvarajućim tag-om:

echo do_shortcode( '[naziv_shortcode]' . $text_to_be_wrapped_in_shortcode . '[/naziv_shortcode]' );

1	echo do_shortcode( '[naziv_shortcode]' . $text_to_be_wrapped_in_shortcode . '[/naziv_shortcode]' );

Primer

Da bi dodelili nekoj promenjivoj ono što vraća shortcode:

$var = do_shortcode( '' );
echo $var;

1 2	$var = do_shortcode( '' ); echo $var;

Jednostavni shortcode

Pravljenje shortcode

Postupak ima sledeći tok:

Napravi callback funkciju koja će biti pozvana kada eordpres “naleti” na shortcode
Registruj shortcode dajući mu jedinstveno ime
Kačenje na akcionu udicu

Callback funkcija

Ova funkcija daje ono za šta je shortcode namenjen, u sledećem primeru shortcode traba da “izbaci” naslov svih postova koji su napisani od stane autora “admin”:

function shortcode_lista_postova() {
  $args= array(
         'author_name' => 'admin'
  );
  $upit = new WP_Query( $args );
// The Loop
  $naslovi_postova = '';
  if($upit->have_posts()) :
      while($upit->have_posts()) : $upit->the_post();
         $naslovi_postova .='<a href="'.get_permalink().'">'.get_the_title().'</a><br>';
      endwhile;
      wp_reset_query();
      return $naslovi_postova;
  else:
     $nema_nista = '<p>Zao nam je, nema naslova postova sa vasim kriterijumom.</p>';
     return $nema_nista;
  endif;
}

function shortcode_lista_postova() {

$args= array(

'author_name' => 'admin'

);

$upit = new WP_Query( $args );

// The Loop

$naslovi_postova = '';

if($upit->have_posts()) :

while($upit->have_posts()) : $upit->the_post();

$naslovi_postova .='<a href="'.get_permalink().'">'.get_the_title().'</a><br>';

endwhile;

wp_reset_query();

return $naslovi_postova;

else:

$nema_nista = '<p>Zao nam je, nema naslova postova sa vasim kriterijumom.</p>';

return $nema_nista;

endif;

}

NAPOMENA:
Krajnji “proizvod” shortcode je text obično izmedju HTML tagova, da bi se prikazao u browser-u koristite return “string” a izbegavajte funkciju echo. Više o ovome pogledajte u delu članka pod nazivom “Štampanje HTML sa shortcode”.

Registrovanje shortcode

Registrovanje se vrši sa funkcijom add_shortcode()

add_shortcode( $tag , $func )

1	add_shortcode( $tag , $func )

$tag – (string) (required) ime shortcode tag-a unutar zagrada [ ]
$func – (required) Calback funkcija koja se poziva kad wordpress naleti na shortcode

function dodavanje_shortcode(){
  add_shortcode('spisak_postova', 'shortcode_lista_postova');
}

function dodavanje_shortcode(){

add_shortcode('spisak_postova', 'shortcode_lista_postova');

}

Kačenje na udicu

add_action( 'init', 'dodavanje_shortcode');

1	add_action( 'init', 'dodavanje_shortcode');

Pozivanje shortcode

Sada je omogućeno da autor članaka kad god ima potrebu za listanjem svih svojih postova samo ubaci shortcode [spisak_postova] u bilo koji deo posta ili statične stranice. Ova lista će se dinamički ažurirati zahvaljujući php kodu u pozadini.

Shortcode sa parametrima

Uvod

Pri “pravljenju” shortcode sa parametrima se koriste sledeće funkcije:

shortcode_atts() – wordpress funkcija
extract() – PHP funkcija

shortcode_atts()

Ova funkcija omogućava da neki niz parova parametar/default_vrednost može da se koristi unutar shortcode (tj. izmedju zagrada [ ] ).

shortcode_atts( $pairs , $atts, $shortcode )

1	shortcode_atts( $pairs , $atts, $shortcode )

$pairs – (required) niz parova tipa key/value (gde su value default-ne vrednosti)
atts – (required) naziv promenjive pod kojim će imenom se koristiti niz unutar shortcode tag-a
$shortcode – (string) (optional) naziv shortcode-a koji će biti korišćen

Primer

$niz_za_shortcode = shortcode_atts(
                           array(
                                 'br_postova' => 1,
                                 'pisac' => 'admin',
                           ),
                           $atts,
                           'spisak_postova'
                    );

$niz_za_shortcode = shortcode_atts(

array(

'br_postova' => 1,

'pisac' => 'admin',

$atts,

'spisak_postova'

);

U ovome primeru funkcija pravi niz parova $atts koji je “povezan” sa nazivom shortcode u zagradama [spisak_postova]:
br_postova => 1
pisac => ‘admin’

extract()

Medjutim prethodno dobijeni niz (key/vrednost) mora da se “prevede” u promenjive sa pridruženim defaultnim vrednostima.
Za ovaj posao se koristi funkcija extract(). Promenjive dobijaju naziv $key i svakoj se pridružuje defaultna vrednost. Za potrebe shortcode-a ova se funkcija koristi u najlakšem obliku i kao atribut prihvata samo niz koji treba da se promeni.

Primer

Ako uzmemo da je niz koji ova funkcija treba da obradi niz iz prošlog primera, onda:

extract($niz_za_shortcode)

1	extract($niz_za_shortcode)

Nakon obrade ova funkcija je napravila (iako se to nigde ne vidi) niz od promenjivih kojima su pridodate vrednosti, kada bi se štampao niz bi izgledao ovako:
$br_postova = 1
$pisac = ‘admin’

Callback funkcija

Ako želim da shortcode prikaže odredjeni broj naslova članaka od odredjenog pisca članaka.

function shortcode_lista_postova($atts) {
 // pravljenje promenjivih i dodeljivanje defaultnih vrednosti
    extract(
        shortcode_atts(
            array(
                'pisac'       => 'admin',
                'br_postova'  => 1,
            ),
            $atts
        )
    );

 // Sada mogu da koristim promenjivu $pisac $br_postova
    $args= array(
        'author_name'    => $pisac,
        'posts_per_page' => $br_postova,
    );
    $upit = new WP_Query( $args );

 // The Loop
    $naslovi_postova = '';
    $naslovi_postova .='Izabrali ste da pogledate '.$br_postova. ' clanka od autora '.$pisac.':'.'</br>';
    if($upit->have_posts()) :
      while($upit->have_posts()) : $upit->the_post();
        $naslovi_postova .='<a href="'.get_permalink().'">'.get_the_title().'</a><br>';
      endwhile;
      wp_reset_query();
      return $naslovi_postova;
    else:
      $nema_nista = '<p>Zao nam je nema postova sa izbranim autorom '. $pisac.'</p>';
      return $nema_nista;
    endif;
}

function shortcode_lista_postova($atts) {

// pravljenje promenjivih i dodeljivanje defaultnih vrednosti

extract(

shortcode_atts(

array(

'pisac' => 'admin',

'br_postova' => 1,

$atts

)

);

// Sada mogu da koristim promenjivu $pisac $br_postova

$args= array(

'author_name' => $pisac,

'posts_per_page' => $br_postova,

);

$upit = new WP_Query( $args );

// The Loop

$naslovi_postova = '';

$naslovi_postova .='Izabrali ste da pogledate '.$br_postova. ' clanka od autora '.$pisac.':'.'</br>';

if($upit->have_posts()) :

while($upit->have_posts()) : $upit->the_post();

$naslovi_postova .='<a href="'.get_permalink().'">'.get_the_title().'</a><br>';

endwhile;

wp_reset_query();

return $naslovi_postova;

else:

$nema_nista = '<p>Zao nam je nema postova sa izbranim autorom '. $pisac.'</p>';

return $nema_nista;

endif;

}

Registrovanje i kačenje na udicu je potuno isto kao u prethodnom primeru:

function dodavanje_shortcode(){
    add_shortcode('spisak_postova', 'shortcode_lista_postova');
}
add_action( 'init', 'dodavanje_shortcode');

function dodavanje_shortcode(){

add_shortcode('spisak_postova', 'shortcode_lista_postova');

}

add_action( 'init', 'dodavanje_shortcode');

Pozivanje shortcode

Pošto smo definisali defaultne vrednosti ovaj kod će da radi i bez dodatno ubačenih parametara, što znači da će kod:

[spisak_postova]

1	[spisak_postova]

prikazati jedan članak (defaultna vrednost $br_postova=1) od autora teksta sa nazivom ‘admin’ (defaultni $pisac je admin)

Sada korisnik može da izabere pisca članaka kao i broj naslova poslova koji će se prikazati na jednoj strani:

[spisak_postova pisac="pera" br_postova="3"]

1	[spisak_postova pisac="pera" br_postova="3"]

Content in shortcode

Ako želimo da ubacimo tekst pre liste članaka iz prethodnih primera, potrebno je unutar callback funkcije dodati promenjivu na mestu gde želimo da se pojavi, ali takodje moramo da je stavimo kao parametar koji se prosledjuje funkciji iz shortcoda.

function shortcode_lista_postova($atts, $content = null) {
// pravljenje promenjivih i dodeljivanje defaultnih vrednosti
    extract(
        shortcode_atts(
            array(
                'pisac'       => 'admin',
                'br_postova'  => 1,
            ),
            $atts
        )
    );

// Sada mogu da koristim promenjivu $pisac $br_postova
    $args= array(
        'author_name'    => $pisac,
        'posts_per_page' => $br_postova,
    );
    $upit = new WP_Query( $args );


// The Loop
    $naslovi_postova  = '';
    $naslovi_postova .= '<h2>'.$content.'</h2>';
    $naslovi_postova .='Izabrali ste da pogledate '.$br_postova. ' clanka od autora '.$pisac.':'.'</br>';
    if($upit->have_posts()) :
      while($upit->have_posts()) : $upit->the_post();
        $naslovi_postova .='<a href="'.get_permalink().'">'.get_the_title().'</a><br>';
      endwhile;
      wp_reset_query();
      return $naslovi_postova;
    else:

      $nema_nista = '<p>Zao nam je nema postova sa izbranim autorom '. $pisac.'</p>';
      return $nema_nista;
    endif;
  }

function shortcode_lista_postova($atts, $content = null) {

// pravljenje promenjivih i dodeljivanje defaultnih vrednosti

extract(

shortcode_atts(

array(

'pisac' => 'admin',

'br_postova' => 1,

$atts

)

);

// Sada mogu da koristim promenjivu $pisac $br_postova

$args= array(

'author_name' => $pisac,

'posts_per_page' => $br_postova,

);

$upit = new WP_Query( $args );

// The Loop

$naslovi_postova = '';

$naslovi_postova .= '<h2>'.$content.'</h2>';

$naslovi_postova .='Izabrali ste da pogledate '.$br_postova. ' clanka od autora '.$pisac.':'.'</br>';

if($upit->have_posts()) :

while($upit->have_posts()) : $upit->the_post();

$naslovi_postova .='<a href="'.get_permalink().'">'.get_the_title().'</a><br>';

endwhile;

wp_reset_query();

return $naslovi_postova;

else:

$nema_nista = '<p>Zao nam je nema postova sa izbranim autorom '. $pisac.'</p>';

return $nema_nista;

endif;

}

Pozivanje shortcode

Sadržaj koji se prosledjuje preko shortcode se stavlja izmedju otvarajućeg i zatvarajućeg taga shortcode kao na sledećem primeru:

[spisak_postova]Sadržaj koji želimo da prosledimo preko shortcode[/spisak_postova]

1	[spisak_postova]Sadržaj koji želimo da prosledimo preko shortcode[/spisak_postova]

Rezultat ovoga koda je isti kao u prethodnim primerima stim što sada iznad liste ima upisani tekst koji stilizovan kao naslov h2.

Štampanje HTML-a sa shortcode

Objašnjenje problema

Kada autor članka koristi shortcode uglavnom očekuje da mu shortcode vrati neki tekst. Taj tekst callback funkcija daje browser-u kao HTML. Pri pisanju callback funkcije treba koristiti return string promenjive a izbegavati funkciju echo. Tekst štampan sa echo može da se pojavi na mestu gde nismo planirali, jer šalje tekst direktno na stranicu bez obzira na funkciju u kojoj se nalazi. Echo štampa čim php “dodje” do nje i ne čeka da se funkcija u kojoj se nalazi završi, dok return vraća string i ukida funkciju! Možda se bolje shvati na sledećim primerima:

Primer (echo)

function foobar_shortcode($atts) {
    echo "Foo"; // "Foo" is echoed to the page
    echo "Bar"; // "Bar" is echoed to the page
}
$var = foobar_shortcode() // $var has a value of NULL

function foobar_shortcode($atts) {

echo "Foo"; // "Foo" is echoed to the page

echo "Bar"; // "Bar" is echoed to the page

}

$var = foobar_shortcode() // $var has a value of NULL

Primer (return & echo)

function foobar_shortcode($atts) {
    return "Foo"; // "Foo" is returned, terminating the function
    echo "Bar"; // This line is never reached
}
$var = foobar_shortcode() // $var has a value of "Foo"

function foobar_shortcode($atts) {

return "Foo"; // "Foo" is returned, terminating the function

echo "Bar"; // This line is never reached

}

$var = foobar_shortcode() // $var has a value of "Foo"

Evo šta o ovome kažu na oficijelnoj stranici:

“Note that the function called by the shortcode should never produce output of any kind. Shortcode functions should return the text that is to be used to replace the shortcode. Producing the output directly will lead to unexpected results.

Štampanje sa return ‘string’

Da bi sakupili sav HTML kod koji shortcode treba da pošalje browser-u, postoje dva pristupa:

Konkatenacija string-a

Jedan od načina za “skupljanje” svog HTML-a u jednu promenjivu je konkatenacija (srp.lepljenje).

$naslovi_postova  = '';
$naslovi_postova .= '<h2>'.$content.'</h2>';
$naslovi_postova .='Izabrali ste da pogledate '.$br_postova. ' clanka od autora '.$pisac.':'.'</br>'
$naslovi_postova .='<a href="'.get_permalink().'">'.get_the_title().'</a><br>';
return $naslovi_postova;

$naslovi_postova = '';

$naslovi_postova .= '<h2>'.$content.'</h2>';

$naslovi_postova .='Izabrali ste da pogledate '.$br_postova. ' clanka od autora '.$pisac.':'.'</br>'

$naslovi_postova .='<a href="'.get_permalink().'">'.get_the_title().'</a><br>';

return $naslovi_postova;

ob_start()

Ova funkcija se korisiti u paru sa suplementarnom funkcijom ob_get_clean(). Od trenutka kada se stavi u kod pa na dalje ona u sebe skuplja svaki HTML kod kao i sve ono što PHP štampa sa nekom od funkcija za prikazivanje na ekranu. Kada u kodu “naleti” na funkciju ob_get_clean() prekine sa skupljanjem i sve preda toj funkciji.

“Start remembering everything that would normally be outputted, but don’t quite do anything with it yet.”

Primer

<?php ob_start();              //Od ovog dela je ukljuceno punjenje ?>
   Hello world, <a href="http://www.blogger.com/myotherpage.php">link</a>
   <h2><a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h2>
   <div class="style">Content</div>
<?php $var = ob_get_clean();    //prekida se punjenje buffer-a, i sadržaj se predaje funkciji ob_get_clean() a ona zatim briše buffer?>
return $var

<?php ob_start(); //Od ovog dela je ukljuceno punjenje ?>

Hello world, <a href="http://www.blogger.com/myotherpage.php">link</a>

<div class="style">Content</div>

<?php $var = ob_get_clean(); //prekida se punjenje buffer-a, i sadržaj se predaje funkciji ob_get_clean() a ona zatim briše buffer?>

return $var

$var promenjiva koja je na kraju sačuvala ceo baffer sada ima vrednost:

Hello world, <a href="http://www.blogger.com/myotherpage.php">link</a>
<h2><a href="sajt.com">Naslov</a></h2>
<div class="style">Content</div>

Hello world, <a href="http://www.blogger.com/myotherpage.php">link</a>

<h2><a href="sajt.com">Naslov</a></h2>

<div class="style">Content</div>

Primer

Ovaj primer je isti kao u delu poda nazivom “Content in shortcode” ali umesto konkatanacije stinga se koristi ob_start() i ob_get_clean() funkcije:

function shortcode_lista_postova($atts, $content = null) {
// pravljenje promenjivih i dodeljivanje defaultnih vrednosti
    extract(
        shortcode_atts(
            array(
                'pisac'       => 'admin',
                'br_postova'  => 1,
            ),
            $atts
        )
    );
// Sada mogu da koristim promenjivu $pisac $br_postova
    $args= array(
        'author_name'    => $pisac,
        'posts_per_page' => $br_postova,
    );
    $upit = new WP_Query( $args );
// The Loop
ob_start();?>
    <h2><?php echo $content ?></h2>
    <p>Izabrali ste da pogledate <?php echo $br_postova ?> clanka od autora <?php echo $pisac ?><p>
<?php if($upit->have_posts()) :
  while($upit->have_posts()) : $upit->the_post();?>
    <h4><a href="<?php echo get_permalink()?>"> <?php echo get_the_title()?></a></h4>
  <?php endwhile;
wp_reset_query();
return ob_get_clean();
else:
  $nema_nista = '<p>Zao nam je nema postova sa izbranim autorom '. $pisac.'</p>';
  return $nema_nista;
endif;
}

function dodavanje_shortcode(){
  add_shortcode('spisak_postova', 'shortcode_lista_postova');
}
add_action( 'init', 'dodavanje_shortcode');

function shortcode_lista_postova($atts, $content = null) {

// pravljenje promenjivih i dodeljivanje defaultnih vrednosti

extract(

shortcode_atts(

array(

'pisac' => 'admin',

'br_postova' => 1,

$atts

)

);

// Sada mogu da koristim promenjivu $pisac $br_postova

$args= array(

'author_name' => $pisac,

'posts_per_page' => $br_postova,

);

$upit = new WP_Query( $args );

// The Loop

ob_start();?>

<p>Izabrali ste da pogledate <?php echo $br_postova ?> clanka od autora <?php echo $pisac ?><p>

<?php if($upit->have_posts()) :

while($upit->have_posts()) : $upit->the_post();?>

<?php endwhile;

wp_reset_query();

return ob_get_clean();

else:

$nema_nista = '<p>Zao nam je nema postova sa izbranim autorom '. $pisac.'</p>';

return $nema_nista;

endif;

}

function dodavanje_shortcode(){

add_shortcode('spisak_postova', 'shortcode_lista_postova');

}

add_action( 'init', 'dodavanje_shortcode');

Sakrivanje ukinutih shortcode

U slučaju da korisnik promeni temu u kojoj je koristio shortcode, nova tema ih neće prepoznati kao shortcode pa će ih ignorisati tj. ponašaće se prema njima kao da su običan tekst i štampaće ih tako. Brisanje svakog “pokvarenog” shortcode možemo da uradimo:

ručno tj. da se otvori svaki post gde je korišćen shortcode i obriše.
dodavanjem koda u functions.php nove teme:

add_shortcode( 'shortcode_tag', '__return_false' );

1

add_shortcode( 'shortcode_tag', '__return_false' );

na mestu ‘shortcode_tag’ treba ubaciti ime svakog pojedinačnog shortcode koji želimo da ukinemo

Podelite:

Web Programiranje

Skripte

Uvod

Omogućiti shortcode svuda

Shortcode u widget-u

Shortcode u komentarima

Shortcode u excerpt-e

Shortcode u oviru teme

Primer

Primer

Primer

Jednostavni shortcode

Pravljenje shortcode

Callback funkcija

Registrovanje shortcode

Kačenje na udicu

Pozivanje shortcode

Shortcode sa parametrima

Uvod

shortcode_atts()

Primer

extract()

Primer

Callback funkcija

Pozivanje shortcode

Content in shortcode

Pozivanje shortcode

Štampanje HTML-a sa shortcode

Objašnjenje problema

Primer (echo)

Primer (return & echo)

Štampanje sa return ‘string’

Konkatenacija string-a

ob_start()

Primer

Primer

Sakrivanje ukinutih shortcode

Ostavite komentar