新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

WordPressのケータイサイトをカスタマイズ【Ktai Style】 #wp

      2014/11/10

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

随分前にWordPress(ワードプレス)ベースの「つぶくま」のケータイサイトをプラグインの「Ktai Style」を使ってサッと作ったのですがいけません。
「つぶくま」はツイッターのリストが重要となってくるのですが実はリストがケータイに対応してなかったんですよねぇ。
で、あらためて今度は「プロット・ファクトリー」のケータイサイトを「Ktai Style」を使って作ったのでその報告と「Ktai Style」を使った時のカスタマイズのポイントを解説します。

WordPress | 日本語
□ WordPress Plugins/JSeries ≫ Ktai Style (携帯対応プラグイン)

スポンサーリンク
 

「Ktai Style」にもテーマがあるのは以前の記事で解説したと思います。
いずれにしても途中までは以下の記事を参考に進めておいてください。
□ 「Ktai Style」導入でWordPressをケータイに対応、テーマは別名にした方がいい
ちなみにベースにしたテーマは「Classic」です。

今回はテーマファイルのカスタマイズ方法を中心に話をすすめていきます。
もう一つ注文をつけておくと、以下のサイトを参考に既にノーマルなケータイサイトが用意されていることが前提です。
□ 携帯サイト(ケータイサイト)の作り方Part2
それをワードプレスの「Ktai Style」に適応させる手順とさせて頂きます。

  1. まずは分かりやすいようにノーマルなケータイサイトのHTMLファイル(XHTMLファイル)をヘッダー部、フッター部と分けて外部ファイルにしておきましょう。
    拡張子は「.php」でOKです。
    作ったらテーマフォルダ内に納めておきましょう。
    で、このとき一つ注意してほしいことがあります。
    保存はする時の文字コードはユニコード(UTF-8)にしておいてください。
    でないと日本語化けます。
  2. 次に、それをheader.phpやfootrer.phpに読み込ませます。
    こちらを参考に。
    □ WordPress(ワードプレス)でテンプレートにテンプレートを読み込む方法(インクルードタグ)
    つまり、
    <?php include( ‘xxxx.php’ ); ?>

    を該当の部分(HTMLを埋め込む部分)に書き込むということになります。

  3. 最後にdiv要素内のstyle属性を復活させます。
    「Ktai Style」ではstyle属性をHTML軽減化のために基本的に削除してケータイ用のコードを書き出します。
    そこで
    <!–?php ks_use_appl_xhtml(); ?–>

    とheader.phpの先頭に書き込みます。
    こうするとstyle属性が復活します。
    via : どや!?KtaiStyleをカスタマイズするときのポイントと注意点 | デザインどや!?
    (↑この記事、「Ktai Style」のカスタマイズが非常分かりやすく解説されています。オススメ!)

  4. 画像を使っている場合は絶対パスで指定。
    ワードプレスのメディアにアップしてあげるのが管理し易いし良いと思います。
    (僕はテーマフォルダ内に入れてしまっています。)

とりあえず以上で基本的なカスタマイズのポイントは押さえられていると思います。
とりあえず、できた「header.php」を紹介しておきます。

<?php ks_use_appl_xhtml(); ?>
<?php /* <body bgcolor=”” text=”” link=”” alink=”” vlink=””> */ ?>
<?php global $ks_settings;
$ks_settings = array(); // erase array for security
$ks_settings[‘h2_style’] = ”;
$ks_settings[‘list_pages’] = ‘sort_column=menu_order,post_title’;
$ks_settings[‘ol_max’] = 9;
$ks_settings[‘ol_count’] = 1;
$ks_settings[‘title_color’] = ‘#008800’;
$ks_settings[‘date_color’] = ks_option(‘ks_date_color’);
$ks_settings[‘edit_color’] = ks_option(‘ks_edit_color’);
if (! is_single()) { ?>
<?php include( ‘
xxxx .php’ ); ?>

<h1><?php echo get_bloginfo(‘name’); ?></h1><hr />
<?php }
ks_pict_number(0, true); ?><a href=”#tail” accesskey=”0″><?php _e(‘Menu’, ‘ktai_style’); ?></a><?php _e(‘&darr;’, ‘ktai_style’); ?><hr />

具体的には先頭にあったHTML記述を削除して太字の部分を追加しただけです。

あとは、プレビューをしながら細かい部分をいじっていく。 
トップページだけに表示させたい画像などもあるでしょうからその場合は分岐等も必要になってくると思います。
で、最後にできたサイトがこちら。
□ プロット・ファクトリー | Web制作・DTPのパソコン教室 [埼玉県熊谷市] (ケータイでアクセスしないと普通のサイトです)

細かい部分で追記があったら別に記事立てたいと思います。

 - CMS, WordPress, ガラケー, プログラミング, 携帯電話・スマホ , ,

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

iOS4で縦にとった写真が横になってしまうバグ?

1年以上前の記事です。内容が古い可能性があります。iPhone(アイフォーン)で …

docomo(ドコモ)ヤバい。SIMフリーiPhoneでXi(LTE)が使えても全く恩恵なし

1年以上前の記事です。内容が古い可能性があります。なんと、SIMフリーの「iPh …

スマホ(スマートフォン)のお陰で通勤2時間全く苦なし(Radiko、Hulu、dマガジン、パズドラ等)

1年以上前の記事です。内容が古い可能性があります。渋谷まで通ってやっていた正社員 …

iPhoneユーザーに対してLINE(ライン)で隠しメッセージを送る方法

1年以上前の記事です。内容が古い可能性があります。送り先がiPhoneユーザー限 …

no image
ライブドアブログがiPhoneでの表示に対応! 6月29日から

1年以上前の記事です。内容が古い可能性があります。待ちに待っていた日がいよいよき …

MNP(ナンバーポータビリティ)するなら格安SIM、LINEも参入。月500円から

1年以上前の記事です。内容が古い可能性があります。最近、どうもdocomoのケー …

背景(バックグラウンド)のイメージをモニター(ウインドウ)のサイズによって変える(レスポンシブルデザイン)Webサイトの作り方【CSS3コーディング】

1年以上前の記事です。内容が古い可能性があります。今、作っている某総合福祉センタ …

一応やっておこう。LINE(ライン)が「PINコード」による2重認証を開始

1年以上前の記事です。内容が古い可能性があります。一連のアカウント乗っ取り事件を …

「TweetDeck for iPhone」がリスト・公式RTに対応

1年以上前の記事です。内容が古い可能性があります。Phone(アイフォーン)はア …

WordPressの更新(アップデート)作業、ちゃんとやったら10万円

1年以上前の記事です。内容が古い可能性があります。自分も使っているWordPre …

血液型オヤジ