タグ別アーカイブ: スタイルシート

org-mode で WordPress の記事を書きたい その3 スタイル追加

とりあえず、手元の 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>';

おぉ〜 良い感じになった。

想定外の文字が意外に多くて、時々パーサが失敗してるけど… まぁ、良いか。そのうち直そう。