WordPressの自作テーマにGumbyを使う際のheadの記述方法

作成:2014/03/19

gumbyロゴ
WordPressの自作テーマをGumbyを使い作成しているのですが、head内の記述を見落としていてメニューのプルダウンが動作しないという事がありましたので、メモがてらhead内について書きます。

head内でのパス

WordPressでは基本絶対パス指定にしなければならないので絶対パス指定にするために書きコードを追加。

<?php echo get_template_directory_uri(); ?>

head内のcssとjsの指定は

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/gumby.css">
<script src="<?php echo get_template_directory_uri(); ?>/js/libs/modernizr-2.6.2.min.js"></script>

bodyタグの終了前に

<!-- Grab Google CDN's jQuery, fall back to local if offline -->
<!-- 2.0 for modern browsers, 1.10 for .oldie -->
<script>
var oldieCheck = Boolean(document.getElementsByTagName('html')[0].className.match(/\soldie\s/g));
if(!oldieCheck) {
  document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"><\/script>');
} else {
  document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"><\/script>');
}
</script>
<script>
if(!window.jQuery) {
  if(!oldieCheck) {
    document.write('<script src="<?php echo get_template_directory_uri(); ?>/js/libs/jquery-2.0.2.min.js"><\/script>');
  } else {
    document.write('<script src="<?php echo get_template_directory_uri(); ?>/js/libs/jquery-1.10.1.min.js"><\/script>');
  }
}
</script>

<!--
Include gumby.js followed by UI modules followed by gumby.init.js
Or concatenate and minify into a single file -->
<script gumby-touch="<?php echo get_template_directory_uri(); ?>/js/libs" src="<?php echo get_template_directory_uri(); ?>/js/libs/gumby.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/libs/ui/gumby.retina.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/libs/ui/gumby.fixed.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/libs/ui/gumby.skiplink.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/libs/ui/gumby.toggleswitch.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/libs/ui/gumby.checkbox.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/libs/ui/gumby.radiobtn.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/libs/ui/gumby.tabs.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/libs/ui/gumby.navbar.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/libs/ui/jquery.validation.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/libs/gumby.init.js"></script>

<!--
Google's recommended deferred loading of JS
gumby.min.js contains gumby.js, all UI modules and gumby.init.js
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "js/libs/gumby.min.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script> -->

<script src="<?php echo get_template_directory_uri(); ?>/js/plugins.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>

<!-- Change UA-XXXXX-X to be your site's ID -->
<!--<script>
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
  load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>-->

<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
   chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->

以上で完了。終了bodyタグの前は必要なjsのみでOK。