29WPtouchのテーマカスタマイズ FTPソフトを使って編集

29WPtouchはスマホで別テーマを使って表示を変えるプラグインです。

これらをカスタマイズするには、基本FTPソフトを使って編集する必要があります。

表示記事数の変更

初期段階ではトップページの記事数を20に設定してます。
変更する時は/wptouch/themes/29 フォルダ内にある function.phpの69行目を編集します。

//---------------- 表示記事数変更 ----------------//
function wptouch_set_posts_per_page( $query ) {
if( $query->is_main_query() && ! is_admin() ) {
$query->set( 'posts_per_page', 20 );

赤い部分の数字を変更すると、トップページの記事数を変更できます。

その場合の表示記事中間のアドセンス(ad.php)の出力を変えるには、index.phpの約100行目あたり
<?php if ($counter == 10){ include (TEMPLATEPATH . ‘/ad.php’); } ?>
の数値を変えればOKです。
10だったら10個記事が表示された後に(ad.php)が出力されます。

カテゴリー色の変更

また、カテゴリー別に記事タイトルの背景色も変えられるように作ってあります。

変えるには、wptouch/themes/29/style.css
の中の1300行目あたりから

.cat-2 {
background-color: #666666;
}

という風な一覧があると思います。

記事のカテゴリーIDを.cat-○ の所に入れ、background-colorに色コードを入れればOKです。
色コードは「色 コード」などで検索してください。

一応動画で説明しておきます。

WPtouchの設定画面からの変更

WPtouchプラグインのワードプレス設定画面からでも、色々と設定できます。

・ヘッダー背景色
・トップページのサムネイル画像・カレンダー画像・サムネイル無しの変更。
・トラッキングコードの挿入

などは、ワードプレスWPtouchの設定からできるので利用しましょう。

メディア設定のサムネイルサイズを100×100に

もし、PCで大きなサムネイル画像を使わないのであれば、ワードプレスのメディア設定のサムネイルサイズを100×100くらいにしておいた方が良いです。

詳しくはこちらの記事を参照。
アイキャッチとサムネイル画像の編集と設定

CSSの編集について

wptouchを使う場合は、PCのテーマとは別のテーマを使う事になります。
これはつまり、記事上で反応するCSSに対して、wptouchの方のテーマでも同じCSSを適用させなくては反応しないという事です。

必ずCSSなどを新たに記述した場合は、wptouch内のCSSでも確認をし、PCとスマホ両方でスタイルが適用されてるかを必ず確認しましょう

wptouchのCSSやテーマをFTPソフトで見つけ編集します。

29wptouchの場合は、
各ドメイン/public_html/wp-content/plugins/wptouch/themes/29/style.css
にありますね。

スタールシートの編集方法は、PCの方の編集方法と同じです。
CSSのカスタマイズについては、HTML/CSSのカテゴリで。

WPtouchのヘッダー部分の編集

coreheaderphp

WPtouchのヘッダー部分の編集は、以下のファイルを編集してください。
/wp-content/plugins/wptouch/themes/core29/core-header.php

FTPでサーバーにアクセスし、wp-contentからフォルダをたどって行けばわかると思います。

ヘッダー部分

core-header.phpの中のの前の部分に、
Googleアナリティクスのコードや、
各種javescriptコードなどを入れれば、
WPtouchテーマで反映されます。

動画解説

PC画面でスマホ画面を見るには▼
PCでスマートフォンページ・携帯ページを閲覧する

テキストエディタについて▼
テキストエディタを使う TeraPad

FTPソフトについて▼
FTPソフトの使い方とディレクトリ構造

投稿日:2017年3月27日(月) 12:50

コメントを入力

You must be logged in to post a comment.

TOP