この記事は2年以上前に書かれたものです。
情報が古い可能性があります。
情報が古い可能性があります。
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_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 -->
お試しください:)
