この記事は2年以上前に書かれたものです。
情報が古い可能性があります。
情報が古い可能性があります。
WP SyntaxHighlighter はPCでも重く感じるくらいなので、もともとスマートフォン用テーマでは処理を無効にしていました。
Google PrettyPrint は WP 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を使用してタブを半角スペースに置換してみました。
