タグ別アーカイブ: プラグイン

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>';

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

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

wordpressのプラグインを作ってみる org-modeのテーブルをそのまま使いたい!その2

org-modeで書いたテーブル

みたいなのを、
blogに書くときにプラグインでHTMLのtableに加工したい。

という訳でプラグインを自作したものの、
org-modeで書いたテーブルがあると
WP-MarkDownが書式を壊してしまって動かない。

プラグインの優先度を上げて先に編集すれば、
最初の編集ではどうにかなるけれど、
再編集ができない。(トホホ)

かと言って
WP-MarkDownを使わないのも不便だし
自分でMarkDown機能を実装するのも面倒臭い。

という訳で、
WP-MarkDownに対抗する暫定対応を加えた。

で、こんな感じに動作する。

ヘッダがある場合。

|——+——+————|
| 名前 | 価格 | 日付 |
|——+——+————|
| あれ | 100 | 2015/01/01 |
| これ | 1000 | 2015/02/01 |
| それ | 99 | 2015/03/01 |
|——+——+————|

ヘッダが無い場合。

|——–+——|
| あっち | 100 |
| そっち | 1000 |
| こっち | 99 |
|——–+——|

めんどいなぁ。

wordpressのプラグインを作ってみる org-modeのテーブルをそのまま使いたい!

org-modeで書いたテーブル

みたいなのを、
blogに書くときにプラグインでHTMLのtableに加工したい。

雰囲気、こんなので良いみたい。

これを /wp-content/plugins/ に置く。

ん?
こんなエラーが出たぞ。

あ〜
WordPressの画面からは、ちゃんとZIPに固めてからでないと
アップロードできないみたいだ。

しょうがないので、サーバーに直接アップロードしよう。

おー。 動いた動いた。

↓こんな感じになった。

|——+——+————|
| 名前 | 価格 | 日付 |
|——+——+————|
| あれ | 100 | 2015/01/01 |
| これ | 1000 | 2015/02/01 |
| それ | 99 | 2015/03/01 |
|——+——+————|

|——–+——|
| 場所 | 距離 |
|——–+——|
| あっち | 100 |
| そっち | 1000 |
| こっち | 99 |
| ?? | 99 |
|——–+——|

変換する関数自体は通勤時間の間に完成したのだけど、
なんか、いろいろ他のプラグインとかち合っていて、
サーバー上で動くまで半日かかってしまった。

スタイルは、他のプラグインに取られたままだし。

記事を編集し直そうとすると、 WP-MarkDown が元記事を壊しちゃうし。。。

案外簡単にプラグインをつくれることは分かったけど、
人に公開しようと思ったら、
そうとう検証に時間をかける必要がありそうだなぁ。これは