Načítání souborů pro specifickou předlohu ve WordPress

Datum:

Tvoříte webové stránky pomocí velmi populárního redakčního systému nazvaného WordPress?

Pokud ano, určitě máte stránku s určitou šablonu která má specifický styl načtený z konkrétního .css souboru nebo .js soubor se scriptem duležitým pro tuto šablonu.

Google mapa ve WordPress

V tomto krátkem příspěvku Vám ukážu specifický kousek kódu, který bude obsahovat Google map script. Tento script se bude načítat pouze pro určitý soubor jako například contact-page-template.php

Řekněme že máme soubor nazvaný contact-page-template.php který obsahuje Google mapu a my si přejeme script který je potřebný pro správnou funkci této mapy načíst pouze u tohoto souboru a žádného jiného.

Ke správné funkčnosti Google mapy je zapotření následující:

  1. Vytvořit div prvek s id=”map-canvas” v contact-page-template.php souboru kterému přidělíme název předlohy Contact page template.
  2. Zahrnout Google map API script a to nejlépe před uzavírací body prvek.
  3. zahrnout .js soubor obsahující script který musí následovat za Google map API script jenž bude obsahovat prvek k určení id=”map-canvas” a po načtení spustí Google map API s přednastavenými parametry.

Upozornění: Nedůležitý kód bude z šablony odstaněn což umožní snadné porozumění.

Kód pro contact-page-template.php

 
<?php
/*
Template Name: Contact page template
*/
?>

<?php get_header(); ?>

<article>
    
    <h1><?php the_title(); ?></h1>
    
    <div id="map-canvas">
        <!-- google map zde -->
    </div>
    
    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
	 
	    <?php the_content(); ?>			

    <?php endwhile; ?>
	
</article>

<?php get_footer(); ?>

Výše uvedený kód začíná identifikací názvu šablony v mém případě Contact page template. Kód rovněž obsahuje div prvek s id=”map-canvas” a get_footer (); funkci, která zahrne soubor footer.php se vším jeho kódem.

Kód obsažený v souboru footer.php

 
<footer>
    <p>Some text in footer area.</p>
</footer>
    
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scripts.js"></script>
    
<?php	
    if ( is_page_template('contact-page-template.php') ) {
        echo '<script src="http://maps.googleapis.com/maps/api/js?v=3.14&sensor=false"></script>';
        echo "\r\n";
        $string =  get_bloginfo('template_url');
        echo "<script src='".$string."/js/google-map.js></script>";
    }
?>
    
</body>
</html>

Soubor názvaný footer.php obsahuje footer prvek a odkaz na script.js soubor jenž je umístěn uvnitř js složky.

Dále je zde důležitá if funkce která řekne WordPress redakčnímu systému aby načetl Google map script a google-map.js soubor a to pouze tehdy pokud soubor s názvem contact-page-template.php je požadována.

TIP: Vždy umístněte odkazy na soubory s koncovkou .ccs mezi head prvky a odkazy s koncovkou .js před uzavírací body prvek. Toto jednoduché zlepšení dokáže zrychlit celkovou rychlost Vašich webových stránek.

 

Máte-li dotaz nebo připomínku k tomuto článku, kontaktujte mě prosím zde.


  |    |