当サイトではアフィリエイト広告及びアドセンス広告を利用しています

WPTouchカスタマイズ備忘録

備忘録としてWPTouchのメニューカスタマイズを残しておこうと思います。

やりたかった内容はこんな感じ。

右上の[▼]で表示される内容に項目を追加したいというものでした。

こんなのが必要だと思う人が居るのかどうかは分かりませんが…

WPTouchのカスタマイズはBanjoさんの記事NANOKAMO BLOGさんの記事
他にもGoogle検索でいくつかのサイトを参考にさせていただき、一応の変更は終わっ
たんですが、メニュー部分に関して記載されているサイトは殆ど見当たらず。

webデザイン初心者が中級デザイナーになるためのブログさんで[▼]表示の
メニューを[▼メニュー]のように分かりやすくするようなカスタマイズ以外は、
見つけられませんでした。

もしかするとコンパネで変更できたり、もっと簡単な変更方法があるのかも
知れませんが、とりあえず以下の変更で追加しています。

WPTouchのバージョンは1.9.35で、デフォルトのテーマ(wptouch/themes/default/)
をコピーしてnewというテーマで変更するものとします。

変更するのは以下の2つのファイル

・wptouch/themes/new/header.php
・wptouch/themes/core/core-functions.php

wptouch/themes/new/header.php の65行目からのメニュー項目呼び出し部分

<ul id="head-pages">
	<?php wptouch_core_header_home(); ?>
	<?php wptouch_core_header_pages(); ?>
	<?php wptouch_core_header_rss(); ?>
	<?php wptouch_core_header_email(); ?>
</ul>

ここに適当な名前でphpの呼び出しを追加します。

<ul id="head-pages">
	<?php wptouch_core_header_home(); ?>
	<?php wptouch_core_header_pages(); ?>
	<?php wptouch_core_header_rss(); ?>
	<?php wptouch_core_header_email(); ?>
	<?php wptouch_core_header_profile(); ?> ←追加した行
</ul>

ダイレクトにHTMLでページリンクを書き足しても表示はされますが、
表示した時に微妙に左右のズレがあったので、直打ちはやめました。

同じくheader.php126行目からの <div id="drop-fade">で始まる部分に

<a href="<?php bloginfo('url'); ?>">Topへ戻る</a>

を追加して、検索の隣にTopへのリンクを追加しています。
表示するとこんな感じ。

  
次に wptouch/themes/core/core-functions.php の中に先程 header.php
で指定した新しいファンクションを追加します。

1行目でファンクション名を定義
2行目でアイコンの画像を指定(私はカスタムアイコンなのでこのパス)
3行目で呼び出しページの指定
4行目で画像の指定と文字列を記載しています

後は保存してFTPで対応するパスにアップロードするだけですが、文字列に
日本語を使う場合はUTF-8(N)で保存しないとバッチリ文字化けします。

もっと簡単な方法がありそうな気もするんだけど、自分用だしいいか(゚ω゚)