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


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。

コードを更に理解する

WordPressをより自由に、思い通りに使用するにはPHPの知識が必要です。

PHPを学ぶには、Web上での情報や知識には限界があるので、人に教えてもらうのが一番の近道です。

そこでオススメなのが「CodeCamp」です。

マンツーマン指導なので、わからないことはすぐ聞けて、無料体験レッスンもあるのでどんな感じか試せます。


ITエンジニア専門スクールもオススメです。

スポンサーリンク

おわりに

head内のjsを読み込み忘れてメニューが動きませんででした。ちょっとしたことでかなり時間を取られてしまった。。。


タグ:

スポンサーリンク



この記事が役に立ったらシェアして頂けると嬉しいです!
このブログをフォロー・RSS購読もお願いします!

スポンサーリンク