WPTouchカスタマイズ備忘録

2015-08-19

備忘録として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)で保存しないとバッチリ文字化けします。

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


PC関連pc

Posted by mizuki