WordPressの投稿画面にプラグインを使わず自力でZen Codingを導入する

Zen Coding

WordPressでプラグインを使用せずに自力でZen Codingを導入する方法です。

投稿画面でビジュアルエディタを使わずバリバリHTMLを書いている方には便利かもしれません。

  

この記事は1年以上前に書かれたものです。
情報が古い可能性があります。

photo credit: alternatekev via photopin cc

検証バージョン

  • WordPress 3.5.1
  • Zen Coding for textarea v0.7.1

Zen Codingのダウンロード

上記ページより Zen Coding for textarea v0.7.1 をダウンロードしましょう。
Zen Coding for textarea v0.7.1

zen_textarea.min.js というファイルをお使いのテーマの jsフォルダ にアップロードします。

ソースコード

お使いのテーマの functions.php に下記の記述をします。

functions.php

<?php

/**
 * 投稿画面の<head>内でZen CodingのJavaScriptファイルを読み込む
 */
add_action( 'admin_print_scripts-post.php', 'hook_admin_print_styles_post' );
add_action( 'admin_print_scripts-post-new.php', 'hook_admin_print_styles_post' );
if ( ! function_exists( 'hook_admin_print_styles_post' ) ) :

	function hook_admin_print_styles_post() {
		$uri = get_template_directory_uri();
		
		echo '<script type="text/javascript" src="' . $uri . '/js/zen_textarea.min.js"></script>';
	}
	
endif;

/**
 * 投稿画面の</body>の上でZen Codingの設定を行う
 */
add_action( 'admin_footer-post.php', 'hook_admin_footer_post' );
add_action( 'admin_footer-post-new.php', 'hook_admin_footer_post' );
if ( ! function_exists( 'hook_admin_footer_post' ) ) :

	function hook_admin_footer_post() {
		echo 
		'<script type="text/javascript">
			zen_textarea.setup({pretty_break: true});
		</script>';
	}
	
endif;

Zen Codingの使い方

投稿画面で Ctrl + E(Macの場合は Command + E) を押します。

展開前の例

div#contents|c

展開前の行末 (例の場合は |c の後ろ) に入力カーソルを持ってきて Ctrl + E(Macの場合は Command + E)を押します。

展開後の例

<!-- #contents -->
<div id="contents"></div>
<!-- /#contents -->

お試しください:)

参考リンク

  

共有やブックマークなど