とりあえず、手元の emacs で書いた org-mode の記事を、 そのまんま WordPress の載せられるようになったけれど、 見た目があまりにも素気ないので、スタイルシートを追加してみる。
HTMLはともかく、デザインっぽい css には縁がなく、サッパリ分らない。 とりあえず、人様のを パクってきて 参考にしてみよう。
とその前に。 WordPressが勝手に追加したHTMLタグを削除しておく。
まずは WordPress 標準の HTML タグを排除する
remove_filter で、余計なフィルタを削除する事までは分かっている。 削除するフィルタは ‘wptexturize’、’wpautop’、’wp_richedit_pre’ あたりで十分そうだ。
ただ、どの資料や先人のブログを見ても、remove_filter を functions.php に 記述するように、とある。
今回のプラグインでも、呼び出される時に同時に remove_filter を行なうと、 とりあえず想定通りの動作はした。
無駄はあるかも知れないけれど、まぁ良いか。
プラグインに挿入したのは、こんなコード フィルタの存在確認は特に必要ないようだし、 このプラグインでは画面の種類まで気にする必要がないので、 今は、これで必要十分。
remove_filter('the_title', 'wptexturize'); // タイトルの記号を実態文字化する
remove_filter('the_content', 'wptexturize'); // 記事の記号を実態文字化する
remove_filter('the_excerpt', 'wptexturize'); // 抜粋の記号を実態文字化する
remove_filter('the_title', 'wpautop'); // タイトルの自動整形を無効にする
remove_filter('the_content', 'wpautop'); // 記事の自動整形を無効にする
remove_filter('the_excerpt', 'wpautop'); // 抜粋の自動整形を無効にする
remove_filter('the_editor_content', 'wp_richedit_pre'); // 改行とBRのあつかい
WP-Markdown や JP Markdown のソースコードを見てみると、 上と同じコードがないし、それぞれ違う実装方法を選んでいるみたいだ。
WP-markdownでは
./wp-markdown.php:79: remove_filter( 'bbp_new_reply_pre_content', 'bbp_code_trick', 20 );
./wp-markdown.php:80: remove_filter( 'bbp_edit_reply_pre_content', 'bbp_code_trick', 20 );
./wp-markdown.php:81: remove_filter( 'bbp_get_form_reply_content', 'bbp_code_trick_reverse', 10 );
./wp-markdown.php:85: remove_filter( 'bbp_new_topic_pre_content', 'bbp_code_trick', 20 );
./wp-markdown.php:86: remove_filter( 'bbp_edit_topic_pre_content', 'bbp_code_trick', 20 );
./wp-markdown.php:87: remove_filter( 'bbp_get_form_topic_content', 'bbp_code_trick_reverse', 10 );
./wp-markdown.php:91: remove_filter( 'content_save_pre', 'balanceTags', 50 ); //Remove balanceTags and apply after MD -> HTML
./wp-markdown.php:125: if ( remove_filter( 'content_save_pre', 'wp_filter_post_kses' ) ) {
jetpack-markdownでは
./markdown/easy-markdown.php:137: remove_filter( 'wp_insert_post_data', array( $this, 'wp_insert_post_data' ), 10, 2 ); ./markdown/easy-markdown.php:138: remove_filter( 'edit_post_content', array( $this, 'edit_post_content' ), 10, 2 ); ./markdown/easy-markdown.php:139: remove_filter( 'edit_post_content_filtered', array( $this, 'edit_post_content_filtered' ), 10, 2 ); ./markdown/easy-markdown.php:141: remove_filter( '_wp_post_revision_fields', array( $this, '_wp_post_revision_fields' ) ); ./markdown/easy-markdown.php:143: remove_filter( 'content_save_pre', array( $this, 'preserve_code_blocks' ), 1 ); ./markdown/easy-markdown.php:161: remove_filter( 'pre_comment_content', array( $this, 'pre_comment_content' ), 9 ); ./markdown/easy-markdown.php:238: $this->kses = remove_filter( 'content_filtered_save_pre', 'wp_filter_post_kses' ) && remove_filter( 'content_save_pre', 'wp_filter_post_kses' ); ./markdown/easy-markdown.php:568: remove_filter( 'wp_revisions_to_keep', '__return_false', 99 );
WordPressのどこを勉強すれば、こういう方法を思いつくのかな？
せめてソースコードのスタイルシートは綺麗に
さて、問題のスタイルシート。 WordPressのHTMLタグを取り除いたので、ひとまず見られる位になったので、 もう少し華やかにしてみたい。
出来るだけ楽をしたいので デザインに自信ないので、出回っている物を流用しよう。
検索すると、 Highlight.js と SyntaxHighlighter が見付かった。 軽量で扱い易そうな Highlight.js を有り難く使わせて頂こう。
javascriptの設置と登録
Highlight.js は、名前の通り javascript なので、 どこかのサーバに置いて、 WordPress に教えてあげる必要がある。
そこではたと困るのが、プラグインのフォルダを知る方法。 探してみると、それっぽいのが結構色々みつかる。
Highlight.js から zenburn.css を選んだとすると。 こんな感じ？
wp_enqueue_script('org2html-highlight', plugin_dir_url( __FILE__ ) . 'script/highlight.pack.js');
wp_enqueue_style('org2html-style', plugin_dir_url( __FILE__ ) . 'style/zenburn.css');
動く以前に、何か怒られた。
login_enqueue_scripts hooks. Please see Debugging in WordPress for more information. (This message was added in version 3.3.) in ... /wp-includes/functions.php on line 3622
検索してみると、一旦関数にして add_action で登録しろって事らしい。 なので、それっぽく書き直してみよう。
function my_enqueue_scripts() {
wp_enqueue_script('org2html-highlight', plugins_url('script/highlight.pack.js', __FILE__ ));
wp_enqueue_style('org2html-style', plugins_url('style/zenburn.css', __FILE__ ));
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
あと、本文の方に javascript の実行部分を追加して、作業完了。
$html .= '＜script＞hljs.initHighlightingOnLoad();＜/script＞';
おぉ〜 良い感じになった。
想定外の文字が意外に多くて、時々パーサが失敗してるけど… まぁ、良いか。そのうち直そう。