wackeyの“くらしメモ”と“しごとメモ”。そしてWebが好き

[Mu]ムジログ

WordPress

WPのKtai Styleで携帯サイトのデザインをする方法

投稿日:

wpktaystyle by you.

先ほど、WordPressの携帯対応でおなじみのKtai Styleプラグインで携帯での表示デザインを変えてみるのにチャレンジしてみました。
思ったより簡単!
でもphpコードの読み方を知らなかったら苦労するなぁ、と感じる部分もありました。しかし、プラグインのページに載っている情報がかなり充実しているので、ある程度思い描いた通りのデザインは実現できます。


管理画面で色をコントロールする

上記のように文字色や日付の書式などは管理画面から簡単に行えます。カスタマイズの第一歩はここからですね。

独自のテーマファイルを作成する

これはデフォルトのテーマをコピーして作成しましょう。
/wp-content/plugins/ktai_style/themes以下にデフォルトテーマがいくつか入っています。これをフォルダごとコピーして編集しましょう。

基本的にはプラグインのページでも推奨されているように

WordPress Plugins/JSeries » Ktai Style (携帯対応プラグイン)より引用:
自テーマは、ktai_style/themes/ ディレクトリーに入れてもいいですが、wp-content/ktai-themes/ ディレクトリーを作成して、そこに格納することをおすすめします。

としたほうが良いようです。
フォルダ名を変えて、さらに中にあるstyle.cssファイルの中身を書き変えます。これを書き変えないとdefaultテーマと切り替えする時に混乱します。style.cssの中を書き変えてデザインテーマの名前をつけましょう。

/*
Theme Name: mudeco ←テーマの名前を入れる
Theme URI: http://musilog.net/
Description: The mudeco Ktai Style theme.
Version: 1.02
Author: wackey
Author URI: http://musilog.net/
*/

僕はここでテーマの名前を変えなかったのでハマりました。。。

そして各ファイルを編集します。
フッターにAdsenseのコード(携帯PHP版)を埋めるにはfooter.phpあたりが良いでしょうか。

また、

WordPress Plugins/JSeries » Ktai Style よくある質問と答えより引用:
フッターの “Converted by Ktai Style Plugin.” を消していいのか

はい。これは著作権表示ではないため、削除しても Ktai Style のライセンス (GPL) に違反しません。単に Ktai Style の宣伝のために付与しているものです ;-)

とあるように削除しても良いようなので、デザインにこだわる方は削除して適切なフッターに書き換えてみましょう。
(素敵なプラグインを作っていただいている作者へ感謝しましょう!)

以上をもって携帯版のデザイン編集の仕方がわかったので、携帯版のデザインが思う存分できそうです。

ちょっとした気づきですが、WPへのアクセスを携帯のみにしたら、携帯サイトのCMSとしてつかえるかもしれませんね。

-WordPress

Copyright© [Mu]ムジログ , 2018 All Rights Reserved Powered by AFFINGER5.