新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

WordPress(ワードプレス)テーマで使った画像やJSファイルの場所 #wp

      2014/11/09

  • このエントリーをはてなブックマークに追加

といった具合に各コンテンツを固定ページで作り始めたのですがこれが一筋縄ではいきませんでした。
そこで、その前に画像や外部ファイルの整理しておくことにしました。
取り急ぎ「デザインが見れればいいや」と、トップページを作った段階ではかなり強引に外部ファイルを収めたため、「images」フォルダが2つになったり、とんでもないディレクトリにデータをアップしたりしていたので、分かりやすく作成したテーマ内にしまっておくことにします。

外部ファイルを入れる場所
こんな感じに「themes」フォルダ内の「plotfactory」フォルダ(作ったテーマ)内に収めます。

スポンサーリンク
 

実はこれはワードプレス側も推奨しているようで、ワードプレスに用意されている関数に「bloginfo();」というのがあり、「<?php bloginfo(‘template_url’); ?>」と指定することでテンプレート用画像やJavascriptファイルの場所を指定できるようになっていて、その場所こそテーマのテンプレートのある場所だったのです。
なお、「bloginfo();」に関しての詳細は以下のサイトで詳しく解説されています。
Function Reference/bloginfo ≪ WordPress Codex

ではさっそくディレクトリの表記に「<?php bloginfo(‘template_url’); ?>」を加えていくことにしましょう。
検索置換も考えましたが、僕の場合基本的にURL表記は相対パスで書くことが多いので、ここは一つソースの見直しも含めて一つ一つ辿っていくことにしました。

□ まずはヘッダー(header.php)
javascriptで「swfobject.js」を呼び出している部分に問題あり。

<script language=”JavaScript” type=”text/javascript” src=”cssjs/swfobject.js”></script>

<script language=”JavaScript” type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/cssjs/swfobject.js”></script>

□ サイドバー(sidebar.php)
問題なし

□ フッター(footer.php)
swfobject関連のjavascriptの記述に問題あり。

var so = new SWFObject(“images/top.swf”, “できない。わからない。プロットファクトリーが解決します。”, “710”, “200”, “7”, “#ffffff”);

var so = new SWFObject(“<?php bloginfo(‘template_url’); ?>/images/top.swf”, “できない。わからない。プロットファクトリーが解決します。”, “700”, “230”, “7”, “#ffffff”);

□ トップページ(index.php)
問題なし

□ コンテンツページ(page.php)
問題なし

意外と使っていなかったので助かりました。
唯一、FlashまわりにJS外部ファイル(swfobject.js)を使っていたのですが、これは実はトップページのみ関係するファイルなので、ヘッダー(header.php)、フッター(footer.php)に書かれている該当部分を、全てトップページ(index.php)に書きこむことにしました。
で、できたものがこちら。
□ index.php

<?php get_header(); ?>
 
<div id=”naiyo”>
↓ヘッダー(header.phpから移動)
  <script language=”JavaScript” type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/cssjs/swfobject.js”></script>
↑ここまで
  
<div id=”flashcontents”>
  
※中略(Flash)
  
</div>
  
<div id=”info”>
  
<h3>インフォメーション</h3>
  
<dl>
   
<?php
   
get_template_part( ‘loop’, ‘index’ );
   
?>
  
</dl>
  
</div>
  
<div id=”news”>
  
※中略(カレンダー)
  
</div>
 
</div>
<?php get_sidebar(); ?>
  
※中略(トップページのみのバナー等)
  
</div>
 
</div>
</div>
↓フッター(footer.php)から移動
<script type=”text/javascript”>
<!–
var so = new SWFObject(“<?php bloginfo(‘template_url’); ?>/images/top.swf”, “できない。わからない。プロットファクトリーが解決します。”, “700”, “230”, “7”, “#ffffff”);
so.write(“flashcontents”);
// –>
</script>
↑ここまで
<?php get_footer(); ?>

ところがこれだけではまだ解決しません。
CSSのディレクトリ階層も変わってしまっているためCSSに書かれたimagesフォルダの場所も書き換えなければなりません。
こちらにはphp表記は使えないので相対パスで指定します。

元々は「images」と同じ階層の「cssjs」フォルダに入っていたCSSファイルだったので「images」の場所が「../images」と表記されていますが、これをwordpressテーマのCSSに変えたので「./images」ないし「images」に書き変えればいいのです。

以上でちゃんとした場所に外部ファイルを格納することができました。
引き続き、コンテンツデザインをやっていきます。

 - CMS, Webデザイン, WordPress, 覚え書き , ,

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

LINE(ライン)のタイムラインは友達ごとに公開設定可能

LINEにツイッター(Twitter)のようなタイムライン機能がついたのは去年の …

著作権法が改正され私的利用でもコピーが違法になる

著作権法が一部改正されるらしい。 □ 著作権法改正案が国会に提出、「写 …

no image
今後書きたいこと

最近、考える時間がないので書きたいことを忘れないように書いておく。 「インターネ …

ノート経由のブログ連携終了につき「RSS Graffiti」にてブログ連携【Facebook】

今までブログをFacebook(フェイスブック)でシェアするときに使っていたノー …

「開く」ダイアログボックスからデスクトップが消えた!復活させる(元に戻す)方法

「開く」ダイアログボックスや「保存」ダイアログボックスで結構使うのが「デスクトッ …

不眠症はキャンプで直せ、テントで寝泊まりすると不眠症が治療できる

自分は基本的寝れない、食べられないということが無いのですが、そういった人は大変だ …

「Google Chrome」で秘密のサイトへ行くならシークレットモード(Ctrl+Shift+N)が便利

激速で人気のブラウザ「Google Chrome」通称「チョロメ」ですが、履歴が …

Tumblr(タンブラー)を勉強してみた (11/11追記)

謎多きTumblr(タンブラー)。 アカウント公開しちゃったのでちょっとだけ勉強 …

no image
飛び火

ライブドア問題がついに僕にも飛び火となって降りかかってきました。 ブログをライブ …

Googleアナリティクスで時間別アクセス数を見る方法

Googleアナリティクスは非常に多機能なアクセス解析ツールですが、多機能すぎて …