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 důležitým pro tuto šablonu.
V tomto krátkém 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 odstraně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 nazvaný 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.
