SUGITAKU.NET

FROM THE OLD SITE

旧WordPressで公開していた記事を、当時の内容を尊重して再掲載しています。

PAST ARTICLE · Web

WordPress PDA & iPhone のカスタム

ふとスマフォ用の表示どうなっているのかと、Wordpress のプラグインを確認したら WordPress PDA & iPhone を使用していた。WordPress インストールして、そのあと完全に放置していたようで…w

WordPress PDA & iPhone はすでにメンテナンスされていないようなので、まずは気になったところを修正した。

  • jQuery Mobile のバージョンを 1.0a2 から最新の 1.2.0 へ変更。
  • ページ遷移で URL にハッシュを含まないように変更。
  • カテゴリページ不具合修正。
  • 記事ページの下のカテゴリを非表示に変更。
  • 計測タグの挿入箇所。

jQuery Mobile のバージョンを 1.0a2 から最新の 1.2.0 へ変更

wp-content/plugins/wp-pda/jqmobile-theme/header.php の jQuery、jQuery Mobile を 1.0a2 から 1.2.0 へ変更と、meta タグの追加をします。head タグ内のみ抜粋して、上が変更前、下が変更後となります。

	<head profile="http://gmpg.org/xfn/11">
		<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
		<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
		<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
		<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
		<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="<?php echo get_theme_root_uri(); ?>/jqmobile-theme/script.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>?nocache=<?php echo time() ?>" type="text/css" media="screen" />
	</head>
	<head profile="http://gmpg.org/xfn/11">
		<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
		<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
		<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
		<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="<?php echo get_theme_root_uri(); ?>/jqmobile-theme/script.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>?nocache=<?php echo time() ?>" type="text/css" media="screen" />
	</head>

ページ遷移で URL にハッシュを含まないように変更

wp-content/plugins/wp-pda/jqmobile-theme/script.js で jQuery Mobile の ajaxEnabled フラグを false にします。上が変更前、下が変更後です。

//SVN: $Id: script.js 337006 2011-01-25 13:34:58Z imthiaz $

function onPageShow(event, ui){
	$('img').load(function() {
	    // Remove attributes in case img-element has set width and height
	    $(this).removeAttr("width")
	           .removeAttr("height")
	           .css({ width: "", height: "" });
		if(this.width>300){
			this.width=300;
		}
	});
	$('object').each(function() {
	    $(this).removeAttr("width")
        .removeAttr("height")
        .css({ width: "", height: "" });
	});
	$('embed').each(function() {
	    $(this).removeAttr("width")
        .removeAttr("height")
        .css({ width: "", height: "" });
	});
}

$('body').live('pageshow', onPageShow);
//SVN: $Id: script.js 337006 2011-01-25 13:34:58Z imthiaz $

function onPageShow(event, ui){
	$('img').load(function() {
	    // Remove attributes in case img-element has set width and height
	    $(this).removeAttr("width")
	           .removeAttr("height")
	           .css({ width: "", height: "" });
		if(this.width>300){
			this.width=300;
		}
	});
	$('object').each(function() {
	    $(this).removeAttr("width")
        .removeAttr("height")
        .css({ width: "", height: "" });
	});
	$('embed').each(function() {
	    $(this).removeAttr("width")
        .removeAttr("height")
        .css({ width: "", height: "" });
	});
}

$('body').live('pageshow', onPageShow);

$(document).bind("mobileinit", function(){
	$.mobile.ajaxEnabled = false; 
});

カテゴリページの不具合修正

jQuery Mobile 1.2 にアップデートすると、カテゴリの表示に不具合が発生するので修正します。wp-content/plugins/wp-pda/jqmobile-theme/index.php のカテゴリの箇所を修正します。上が変更前、下が変更後となります。

<?php if($detectedPage=='categories') :?>
	<div data-role="content">
		<ul data-role="listview" data-inset="true">
			<?php 
				$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0');
				$categoriesHTML = ereg_replace("/¥n¥r|¥r¥n|¥n|¥r/", "", $categoriesHTML);
				$categoriesHTML = str_replace("  ",' ',$categoriesHTML);	
				$categoriesHTML = str_replace("  ",' ',$categoriesHTML);	
				$categoriesHTML = str_replace("a> (",'a> <span class="ui-li-count">',$categoriesHTML);	
				$categoriesHTML = str_replace(")</li",'</span> </li',$categoriesHTML);	
				echo $categoriesHTML;
			?>
		</ul>
	</div>
<?php endif; ?>
<?php if($detectedPage=='categories') :?>
	<div data-role="content">
		<ul data-role="listview" data-inset="true">
			<?php 
				$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0&depth=1');
				$categoriesHTML = ereg_replace("/¥n¥r|¥r¥n|¥n|¥r/", "", $categoriesHTML);
				$categoriesHTML = str_replace("  ",' ',$categoriesHTML);	
				$categoriesHTML = str_replace("  ",' ',$categoriesHTML);	
				$categoriesHTML = str_replace("a> (",'a> <span class="ui-li-count">',$categoriesHTML);	
				$categoriesHTML = str_replace(")",'',$categoriesHTML);	
				$categoriesHTML = str_replace(")</li",'</span> </li',$categoriesHTML);	
				echo $categoriesHTML;
			?>
		</ul>
	</div>
<?php endif; ?>

記事ページの下のカテゴリを非表示に変更

wp-content/plugins/wp-pda/jqmobile-theme/single.php の最終行の <?php get_footer(); ?> を削除します。上が変更前、下が変更後となります。

<?php //SVN: $Id: single.php 337006 2011-01-25 13:34:58Z imthiaz $ ?>
<?php get_header(); ?>
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
		<div data-role="content" id="maincontent">
		    <h2><?php the_title(); ?></h2>
	    	<div class="content"><?php the_content(); ?></div>
			<p>
				<small>
					<?php echo sprintf(__('This entry was posted on %1$s at %2$s and is filled under:','pda-theme'), the_date(__('l, F jS, Y','pda-theme'), '', '', FALSE),get_the_time()) . " "; the_category(', ');?>
				</small>
			</p>
		</div>
		<div data-role="footer" class="ui-bar">	
			<?php previous_post_link('%link','Previous') ?>
			<?php next_post_link('%link','Next') ?>	   
		</div>
	<?php endwhile; else: ?>
		<div data-role="content">
			<p class="center"><?php _e("Sorry, but you are looking for something that isn't here.",'pda-theme'); ?></p>
		</div>
	<?php endif; ?>
<?php get_footer(); ?>
<?php //SVN: $Id: single.php 337006 2011-01-25 13:34:58Z imthiaz $ ?>
<?php get_header(); ?>
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
		<div data-role="content" id="maincontent">
		    <h2><?php the_title(); ?></h2>
	    	<div class="content"><?php the_content(); ?></div>
			<p>
				<small>
					<?php echo sprintf(__('This entry was posted on %1$s at %2$s and is filled under:','pda-theme'), the_date(__('l, F jS, Y','pda-theme'), '', '', FALSE),get_the_time()) . " "; the_category(', ');?>
				</small>
			</p>
		</div>
		<div data-role="footer" class="ui-bar">	
			<?php previous_post_link('%link','Previous') ?>
			<?php next_post_link('%link','Next') ?>	   
		</div>
	<?php endwhile; else: ?>
		<div data-role="content">
			<p class="center"><?php _e("Sorry, but you are looking for something that isn't here.",'pda-theme'); ?></p>
		</div>
	<?php endif; ?>

計測タグ挿入箇所

記事ページと記事ページ以外に追加する必要があります。

  • 記事ページ wp-content/plugins/wp-pda/jqmobile-theme/single.php
  • 記事ページ以外 wp-content/plugins/wp-pda/jqmobile-theme/index.php

開発は行われていないようなので、他のプラグインを使用する方がいいかと思います。暫定の対応で、他のプラグインを探す予定ですので、どなたかの参考になれば幸いです。