Ktai Styleをカスタマイズして携帯用フロントページ作成

Ktai Styleをカスタマイズして携帯用フロントページ作成

カスタマイズをする前に確認しておきたいことがあるんですが、あなたの作成しているサイトにはテーマテンプレートファイルでhome.phpのようなファイルを使いフロントページを表示しているサイトですか?もし最新記事を表示する通常のブログサイトならカスタマイズする必要はないと思います。ここではフロントページが用意してある事を前提にカスタマイズをしていきます。

フロントページの確認は設定の表示設定で確認できます。下記の画像はフロントページを用意している例です。
フロントページの確認

各メーカーでの表示確認

Ktai Styleカスタマイズをするにはまず携帯電話でどのように表示するのかを確認する必要があると思います。携帯電話にはdocomo、au、softbankの各メーカーがありメーカーによっては文字化けやサイトを表示できない場合があります。そこで便利なのがサイトビューワ-gooモバイルです。ここではdocomo、au、softbankの各メーカーでどうのように表示されるかが確認できます。又サイトビューワ内で右クリックすれば携帯サイトのソースも確認できて物凄く便利です。但し現在2010年11月ではau、softbankの絵文字が表示できませんでした。そこで絵文字の確認をする為にFireMobileSimulatorからFirefoxのアドオンをダウンロードしてFirefoxブラウザより確認すると絵文字を確認することが出来ます。

携帯用フロントページ作成の準備

このサイトのタイトルでもあるDetaramehp(デタラメホームページ)の通り、私自身がプロではなく又PHPに関してはド素人なので誤りがあるかもしれません。そこでカスタマイズする際は自己責任でお願いします。
メインで使うテンプレートはPhotolog 1.3.0を使います。携帯専用のフロントページ用ファイルはDefault 2.0.0テーマに入っているhome.phpファイルを使い作成していきます。

まず初めにPhotolog 1.3.0(フォルダ名photolog)をデスクトップなどに保存してフォルダの名前を変更しておきます。ここでは仮にそのフォルダの名前を「originaru」と言う名前で説明を進めていきます。originaruの中にDefault 2.0.0(フォルダ名default)テーマのhome.phpファイルを収めます。これで下準備の完了です。それではまずheader.phpの一部を変更してみます。

header.phpの変更

最近の機種では携帯でもスタイルシートを使い文字や色などを変更できますが古い機種になるとスタイルシートは使えない為従来式の HTML 記述 (font color=”blue” など)を使い変更していきます。
header.phpはそのままでも使えるんですが大見出し(h1)のタイトルが携帯サイトではやたらと大きい為にその部分を縮小しました。

32行目から36行目ぐらいに下記のコードが書かれています。

修正前
if (! ks_is_redir()) { // other than redir.php
	$before ='<div style="color:white;background-color:#ff7f00;margin:0;">' .
	(ks_is_flat_rate() ? 
	'<h1 style="margin:0"><img src="' . ks_theme_url(KTAI_NOT_ECHO) . 'icon.gif" alt="" />'
	: '<h1>');
	ks_page_title(array('before' => $before, 'after' => '</h1></div>'));

上記のコードの箇所を下記の用に変えると大見出し(h1)のタイトルを縮小できます。

修正後
if (! ks_is_redir()) { // other than redir.php
	$opt = array(		
		'before' => '<div style="text-align:center;" ><h1 style="margin:0;"><font size="2">', 
		'before_logo' => NULL,
		'after' => '<br /><img src="' . ks_theme_url(KTAI_NOT_ECHO) . 'wiki.gif" alt="" /></font></h1></div>');
	/* $opt['logo_file'] = 'logo.png'; */
	ks_page_title($opt); ?> 

修正後は下記のようになります。縮小したタイトルの下にトップ用の画像が入ります。またwiki.gifと言う部分がトップタイトルの画像になりますので各自で用意してください。画像のサイズは横幅は234pxで作成しましょう。

ヘッダーカスタマイズ

携帯用フロントページ作成

それでは次に携帯専用のフロントページをカスタマイズしてみます。通常の携帯サイトのフロントページでは各カテゴリーや各ページのリストが表示されていますが、home.phpをそのまま使うとフロンとページの記事が表示されて見にくい感じになります。そこでフロントページの記事をあえて表示させずに携帯用のフロントページらしくカスタマイズしていきます。

7行目ぐらいから50行目ぐらいに下記のコードがありますのでそれを全て削除します。

修正前
<?php if (have_posts()) : the_post();
	the_date('','<div align="center"><font color="' . $ks_settings['date_color'] . '">','</font></div>'); ?>
	<div align="right"><font size="-1"><a href="#cont" accesskey="<?php echo $next_accesskey; ?>"><img localsrc="30" alt="<?php _e('&darr;', 'ktai_style'); ?>" /><?php _e('Skip the content', 'ktai_style'); ?></a><?php ks_pict_number($next_accesskey, true); ?></font></div>
	<h2><?php if (ks_is_front()) { ?>
		<img localsrc="334" alt="[new] " />
	<?php }
	the_title(); ?></h2>
	<div><img localsrc="68" alt="" /><font color="<?php echo $ks_settings['author_color']; ?>"><?php the_author(); ?></font>
	<img localsrc="46" alt=" @ " /><font color="<?php echo $ks_settings['author_color']; ?>"><?php the_time(); ?></font></div>
	<?php ks_content(__('(more...)'), 0 , '' , 1000); ks_link_pages(); ?>
	<div><img localsrc="354" alt="" /><font size="-1"><?php echo __('Categories') . ':'; ks_category(); ?></font><br />
	<?php ks_tags('<img localsrc="77" alt="" /><font size="-1">' . __('Tags') . ':', '</font><br />');
	if (ks_option('ks_separate_comments')) {
		ks_comments_link(NULL, 
			__('No Comments/Pings', 'ktai_style'), 
			__('One Comment/Ping', 'ktai_style'), 
			__('% Comments and Pings', 'ktai_style'));
	} else {
		ks_comments_link();
	}
	ks_comments_post_link(NULL, '<br />');
	?></div>
	<?php if (have_posts()) : ?>
		<hr />
		<h2><a name="cont"><?php _e('Following posts', 'ktai_style'); ?></a></h2>
		<dl>
		<?php for ($count = $ks_settings['ol_count']; have_posts() ; $count++) :
			the_post(); ?>
			<dt><?php 
			ks_ordered_link($count, $next_accesskey -1, get_permalink(), get_the_title());
			edit_post_link('<font color="' . $ks_settings['edit_color'] . '">' . __('Edit') . '</font>', '<img localsrc="104" alt="" />');
			echo ' ';
			ks_comments_link(
				'<img localsrc="86" alt="[' . __('Comments') . '] " />', 
				'0', '1', '%', 
				'<img localsrc="61" alt="' . __('Comments off', 'ktai_style') . '" />', 
				'<img localsrc="120" alt="?" />');
			?> <img localsrc="46" alt="@ " /><font color="<?php echo $ks_settings['date_color']; ?>"><?php ks_time(); ?></font></dt>
		<?php endfor; ?>
		</dl>
	<?php endif; // inner have_posts() ?>
	<div align="center"><?php 
		ks_posts_nav_link();
		ks_posts_nav_dropdown(array('before' => '<br />', 'min_pages' => 3));
	?></div>
<?php else: ?>

かなり削除しますが必要なコードは下記のコードのみです。これで携帯のみ表示内に必要なタグを追加すれば携帯向けのフロントページが作成できます

修正後
<?php if (have_posts()) : the_post(); ?>

<!--携帯のみ表示-->
<p>ここで通常のタグやWordPress,Ktai stayleなどのテンプレートタグを使い作成できます。</p>

<!--携帯のみ表示ここまで-->

<?php else: ?>

携帯のみ表示内に通常のタグやWordPress,Ktai stayleなどのテンプレートタグを使い仕上げたイメージが下記画像の右になります。
フロントページ見本

フロントページの名称はPCサイトで使っている名称と同じ名前で保存する

フロントページを保存する際はPCサイトで使っている名称と同じ名称で保存してください。例えばPCサイトのフロントページのファイルがtoppage.phpになっている場合には携帯用フロントページファイルも同様の名称toppage.phpにするようにしてください。

最終更新日: 2013年2月3日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

Ktai Styleをカスタマイズして携帯用フロントページ作成の関連記事

Ktai Styleをカスタマイズして携帯用フロントページ作成” への11件のコメント

  1. 大変参考に成りました。
    もしよろしかったら、勉強材料にとても成ると思いますので、出来上がったテーマ(現在の携帯用ページ)のテーマを公開頂けませんでしょうか?

    • コメントありがとうございます。
      出来上がったテーマの公開の件ですが、このページでも紹介してあるとおりPhotolog 1.3.0とDefault 2.0.0を使い後はサイトにあわせた必要なコードを使えば簡単に作成出来ると思います。
      Ktai Styleで使えるコードは「Ktai Styleカスタマイズ時に便利なテンプレートタグ」で紹介してあります。

      又分からないことがあればお気軽にコメントしてください。

  2. はじめまして。
    携帯用フロントページ作成で行き詰っていましたが、こちらを参考になんとか形になってきました。
    WordPressをカスタマイズするのにあたり、こちらのサイト様には大変お世話になりました。
    ありがとうございました。

  3. ピンバック: スマホ | Emorita log

  4. 初めまして。
    ktai styleのテーマをカスタムしていて辿り着きました。
    もしご存知でしたらで良いのですが・・・

    Topページにアイキャッチのサムネイル画像を表示させると、画像をきちんと回り込みさせられません。
    例えば左にアイキャッチサムネイル画像、右にタイトルリンクという表示にさせるとします。
    すると右に表示されるタイトルリンクが、真横というより右下へ表示されます。
    説明が下手で申し訳ありません^^;

    tableタグなどを使用してもアイキャッチ画像を回り込めずにいます。
    対処方法を御存知でしたら教えて頂けないでしょうか。
    ヨロシクお願いしますm(_ _)m

  5. 度々申し訳ありません。
    解決できたので再度コメントさせて頂きました。

    <td align=”left” width=”**%”>
    のようにleftに指定したらOKでした。

    お騒がせ致しました^^;

    • コメントありがとうございます。

      解決できて良かったです(^^)

  6. 大変参考にさせて頂いております。

    質問があります。
    記事下のカテゴリーはどのようにせっていされているのですか?
    宜しく返答お願いしますm(_ _)m

    • コメントありがとうございます。

      Ktai Styleカスタマイズ時に便利なテンプレートタグに書いてあるカテゴリーの親一覧を表示するテンプレートタグでカテゴリーは表示できます。

      カテゴリーの親一覧を表示するテンプレートタグ

      <ul><?php wp_list_categories('title_li=&depth=1'); ?></ul>
      

      これでカテゴリーは表示できます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*