WordPress

新しいWPtouch(3.1.5)のメニューをカスタマイズ

2014年2月24日あむちょ 21件のコメント

あむちょです。

スマホからのアクセスが多いので、PV数を上げるためにWPtouchのメニューをカスタマイズし倒す。

脱獄関連の記事が人気なせいか、このブログのアクセス数の内、半分以上はiPhoneからのアクセスになってます。ぜひ上のリンクからアプリをやっていただきたいものである。

で、スマホ用最適化プラグインのWPtouchをいれているのだが、ちょっと前のアプッデートで、かなりかっこ良くなりました。

この素晴らしいプラグインをカスタマイズして、よりユーザビリティーを高めるべく今回やったのが以下。

Adsenseの挿入
記事内でのアイキャッチ画像を非表示
メニューのスクロール固定
メニューアイコンの変更

まずは

Adsenseの挿入

FTPクライアントソフトで

~/wp-content/plugins/wptouch/themes/bauhaus/default/single.php
をダウンロードし、バックアップ。

FTPクライアントソフトはMacではFileZilla、WindowsではFFFTPを使ってます。

30行ぐらいにある

<div class=”post-page-content”>の上にAdsenseコードを追加

<br />
    &lt;?php if ( bauhaus_should_show_author() ) { ?&gt;<br />
        &lt;span class=&quot;post-author&quot;&gt;&lt;?php the_author(); ?&gt;&lt;/span&gt;<br />
    &lt;?php } ?&gt;<br />
&lt;/div&gt;</p>
<p> //ここにAdsenseコードを追加&lt;/p&gt;</p>
<p>&lt;div class=&quot;post-page-content&quot;&gt;<br />

これで各記事のタイトルとアイキャッチ画像の間にAdsenseが挿入されます。

次に、

記事内でのアイキャッチ画像を非表示

　→　

各記事にアクセスした際に、アイキャッチ画像のせいでスクロールしないと本文が表示されないので、非表示にしました。

先ほどと同じsingle.phpの46行ぐらい

<br />
&lt;!&#8211;<br />
    &lt;?php if ( bauhaus_should_show_thumbnail() &amp;&amp; wptouch_has_post_thumbnail() ) { ?&gt;<br />
&lt;div class=&quot;post-page-thumbnail&quot;&gt;<br />
            &lt;?php the_post_thumbnail(&#8216;large&#8217;, array( &#8216;class&#8217; =&gt; &#8216;post-thumbnail wp-post-image&#8217; ) ); ?&gt;<br />
        &lt;/div&gt;</p>
<p>    &lt;?php } ?&gt;<br />
&#8211;&gt;<br />

これらをコメントアウトして無効に。

お次は

メニューのスクロールを固定

スマホからアクセスした場合、サイドバーは表示されないので、他の記事もついでに読んでもらいにくい。

そこでメニューをスクロール固定にして、他の記事にアクセスしやすくしました。

~/wp-content/plugins/wptouch/themes/bauhaus/default/header-bottom.php
をダウンロードしバックアップ

3行あたりの

<header id=”header-title-logo”>から
50行前後にあるの上まで<div>で囲む

<br />
    &lt;div&gt;    //追加</p>
<p>        &lt;header id=&quot;header-title-logo&quot;&gt;&lt;!&#8211;?php if ( bauhaus_should_show_search() ) { ?&#8211;&gt;<br />
        //省略<br />
        &lt;/div&gt;<br />
    &lt;/div&gt;    //追加</p>
<p>&lt;?php do_action( &#8216;wptouch_advertising_top&#8217; ); ?&#8211;&gt;<br />

次に追加したdivに、idなりclassなりを付与してstyle.cssにスクロール固定を追加するとこだけど、めんどくさいのでdivに直接かきました

このままだと高さがとれず、メニューがタイトル等とかぶるので、追加した

<div>の上に高さ54pxの空divを追加。

あんまり褒められた方法ではないです。

最後は

メニューアイコンの変更

→

標準のメニューアイコンでもいいけど、よりメニューとわかりやすく。

使う画像を同じディレクトリにアップロード。

~/wp-content/plugins/wptouch/themes/bauhaus/default/style.cssをダウンロードしバックアップ

70行目あたりの#menu-toggle:after

<br />
#menu-toggle:after {<br />
	content: &quot;\f0c9&quot;;<br />
	display: block;<br />
	font: 110% &#8216;FontAwesome&#8217;, sans-serif;<br />
	padding: 18px;<br />
}<br />

標準では画像ではなく文字です。これを以下のように変更

<br />
#menu-toggle:after {<br />
	content: url(&quot;ファイル名.png&quot;);<br />
	padding: 18px;<br />
}<br />

また高さを微調整するために、63行目あたりの#menu-toggleのtopを各画像にあわせて調整

<br />
#menu-toggle {<br />
	position: absolute;<br />
	right: 0;<br />
	top:12px;<br />
}<br />

このあたりは各自好きな画像を使えばいいけど、メニューの高さは54pxとなってます。

これでPV数があがるかはわかりませんが、スマホから各記事にアクセスしやすくなったと思います。

ほんとはPV数なんかより、

アプリをダウンロードして欲しい。

PHPによるWordPressカスタマイズブック―3.x対応

[ad][ad]