ワードプレスで記事のマークアップを数倍楽にする方法!

ホームページでもブログでも、HTMLタグは適宜使ったほうがいいと思う派のミナベです。
Googleなどの検索エンジンも、正しいマークアップは決して悪く思わないはずです。

さて、数時間前にフレブロに初投稿したのですが、HTMLによるマークアップがちょっと面倒で(プロが面倒とか言ってすみません!)、マークダウンを取り入れようと判断しました。

マークダウンというのは、HTMLを作ってくれるマークアップ言語の一つです。
例えば、リストタグを使いたいときHTMLだと<ul><li></li></ul>と書かなければリストで表示してくれません。
これがマークダウンだと、リストしたいワードの前に*(アスタリスク)をつけるだけでOKなのです!
これかなり時短になります。

以下に今回行ったマークダウンについてまとめました。
マークアップが面倒なんだよねという方や、必要最低限のマークアップが出来ればOKという方のご参考になれば幸いです。

Markdown対応テキストエディタ「Live Md」を活用

私が日ごろ使っているインターネットブラウザはGoogle Chromeです。
このGoogle Chromeに拡張機能のLive Mdをインストールします。
インストールは下記リンクからどうぞ。
https://chrome.google.com/webstore/detail/livemd/gdkdfndgjifoabdbagnmodicadpngfko?hl=ja

ChromeにLive Mdをインストールすると、Chromeの右上に#が書かれた水色のボタンが表示されます。(もし表示されなければ、Chromeをシャットダウンしてもう一度立ち上げてみてください。)
この水色のボタンをクリックすると別タブが開いてLive Mdのエディターが表示されます。

Live Mdのエディターの3カラムのうちの中央カラムにマークダウンで文章を書いていきます。
★Markdownの記述方法は、下記の参考サイトが便利!
http://cartman0.hatenablog.com/entry/2015/03/31/034758#br

3カラムのうちの右側カラムにリアルタイムでプレビューが表示されていきます。これこそLiveですね!

文章を書き終わったら、右側カラムの文章をまるっとコピーして、wordpressの投稿記事(プレビューモードにしたエディタ内)にペーストします。
そして、エディタをHTMLモードに切り替えてみると、あら不思議!ペーストした文章にはキチンとHTMLが含まれています。便利すぎる!手軽すぎる!

※Wordpressにマークダウンを直接書けるようにするプラグイン「JP Markdown」もありますが、今回は割愛します。

ん?ちょっと待って。ペーストしたHTML、ちょっとおかしくない!?

WordPressの投稿記事にペーストしたHTMLの一部のタグが消えてしまいました。
これ、Wordpressで定義されている自動整形機能によるものです。
未だにこの機能が消えないということは、誰かしらの役に立っている証拠なのでしょうが、今回のケースでは機能を停止する必要があります。
以前はWordpressのプラグイン「PS Disable Auto Formatting」が有効でしたが、Wordpressのバージョンアップでバグが発生し、今では使い物にならないようです。ということで却下。

そこでfunction.phpに下記のコードを追加することで、自動整形機能をオフにしました。

function override_mce_options( $init_array ) {
    $init_array[\'indent\']  = true;
    $init_array[\'wpautop\'] = false;

    return $init_array;
}

add_filter( \'tiny_mce_before_init\', \'override_mce_options\' );

これで、マークダウンで生成されたHTMLをまるっとペーストすることが出来ました。
めでたしめでたし★

 

参考

Chrome拡張機能「LiveMd」でお手軽MarkDown生活
http://unskilled.site/chrome%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%80%8Clivemd%E3%80%8D%E3%81%A7%E3%81%8A%E6%89%8B%E8%BB%BDmarkdown%E7%94%9F%E6%B4%BB/

Markdown記法まとめ(見出し、段落、改行、水平線、強調、引用、コード)[1/3]
http://cartman0.hatenablog.com/entry/2015/03/31/034758#br

WordPressの自動整形(ビジュアルエディタ含む)を無効にする方法
http://qiita.com/jyokyoku/items/c560b0d1eacc1df61620

 

 

 

Follow me!