WordPressでスマートフォン用テーマのみ「WP SyntaxHighlighter」を無効にして「Google PrettyPrint」を使用してソースコードを整形してみた

PC用のテーマではWP SyntaxHighlighterを使用し、スマートフォン用のテーマではGoogle PrettyPrintを使用するサンプルを書いてみました。
テーマの切り替えはWP SiteManagerを使用しています。

  

この記事は1年以上前に書かれたものです。
情報が古い可能性があります。

WP SyntaxHighlighter はPCでも重く感じるくらいなので、もともとスマートフォン用テーマでは処理を無効にしていました。

Google PrettyPrintWP SyntaxHighlighter のように豊富な対応言語やオプションなどの機能面の魅力は少ないですが、WP SyntaxHighlighterより軽く感じたので今回実際にブログに導入してみました。

検証バージョン

  • WordPress 3.7.1
  • WP SyntaxHighlighter 1.7.3

ソースコード

スマートフォン用のテーマの functions.php に記述を行います。

functions.php

<?php
/**
 * WP SyntaxHighlighterで用意されているアクションフックの関数を除去します
 */
add_action( 'after_setup_theme', 'hook_after_setup_theme' );
if ( ! function_exists( 'hook_after_setup_theme' ) ) :

	function hook_after_setup_theme() {
	
		// WP SyntaxHighlighterを無効にする
		remove_action( 'wp_head', 'wp_sh_load_addl_style' );
		remove_action( 'wp_print_styles', 'wp_sh_load_style' );
		remove_action( 'wp_footer', 'wp_sh_check_valid_tag' );
		remove_action( 'wp_footer', 'wp_sh_load_scripts_on_footer' );
	}
	
endif;

/**
 * Google PrettyPrintを使用するために<head>~</head>内にコードを書き出します
 */
add_action( 'wp_head', 'hook_wp_head' );
if ( ! function_exists( 'hook_wp_head' ) ) :

	function hook_wp_head() {

		// シングルページでGoogle PrettyPrintを使用する
		if( is_single() ) {
			echo '
				<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
				<script type="text/javascript">
					jQuery( document ).ready(function( $ ) {
					
						// Google PrettyPrintを使用するためにクラスを付与
						$( "pre" ).addClass( "prettyprint" );
						
						// ソースコードのタブを半角スペース二つに置換
						$( "pre" ).each( function() {
							 $( this ).html( $( this ).html().replace( /\t/g, "  " ) );
						});
					});
				</script>';
		}

endif;

スマートフォンで見た結果

スマートフォンで見た結果

スマートフォンで見てみるとWP SyntaxHighlighterではなくGoogle PrettyPrintが適用されました。
Google PrettyPrintにはスマートタブ機能のようなものはないのでタブをスペースに変換したい場合は自分で行う必要があります。

因みに、jQueryを使用してタブを半角スペースに置換してみました。

参考リンク

  

共有やブックマークなど