• web制作

ビジュアルエディタで利用出来るボタンのcssカスタマイズ【wordpress】

大和田
このエントリーをはてなブックマークに追加

ワードプレスを納品した後、記事を更新していくクライアント様の中にコードが書ける方がいるほうが稀ですよね。
そんな時「ビジュアルエディタ」が便利なのですが、ボタンを押した時にどういった処理がされているのかがわかっていないと、結構やっかいなものな気がしましたのでまとめてみました。
※2016/03/14時点の情報です。
※wordpress バージョン4.42使用

装飾するための下準備とeditor-style.css

記事を引っ張ってくるコードは

<?php $posts = get_posts(array( 'post_type' => 'post','numberposts'=>10,)); ?>
<?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
<article class="block-single">
 <h1 class="title-single">
  <?php the_title(); ?>
 </h1>
 <div class="wp-editor">
  <?php the_content(); ?>
 </div>
</article>
<?php endforeach; ?>
<?php endif; wp_reset_postdata(); ?>

↑こちらとします。

ループ分や記事全体を囲む方法は自由ですが

<div class="wp-editor">
  <?php the_content(); ?>
</div>

ここはそのままのほうが楽です。

このクラス「wp-editor」はワードプレスの記事投稿画面に振られているクラス名なので、テンプレートにcssで装飾した後にeditor-style.cssファイルにその部分をコピペすれば投稿画面と投稿された記事の見た目を同じにすることができます。

editor-style.cssの使い方

editor-style.cssは記事投稿画面の見た目を管理しているファイルです。
デフォルトだと使用できないので、functions.phpをいじり、好きなスタイルを記載した後に使用しているテーマフォルダにアップしなければなりません。

1,functions.php内に

//投稿画面編集用css
add_editor_style('editor-style.css');

これを追加する

2,editor-style.cssというファイルを作成し、テーマフォルダにアップする。

ボタンの種類と処理の説明

画像の挿入

まずは画像を追加するために使う「メディアを追加」ボタンです。
領域のキャプチャ 28
これを押すことで「メディアを挿入」メニューがポップアップで出てきます。
一応「ファイルをアップロード」と「メディアライブラリ」のタブ切り替えができますが、気にせず画像をドラッグ&ドロップすれば画像がアップロードされます。

添付ファイルの表示設定をいじる際は下記のサイト様の情報などをご確認ください。
http://webdesignerwork.jp/wordpress/wordpress_image_default/

どんなサイズの画像が挿入されるかわからないので、先手を打って画像のサイズ調整を行います。

.wp-editor img {
 max-width: 100%;
 height: auto;
}

画像を挿入した後、画像をクリックすることで位置を変更することができます。

領域のキャプチャ 29

ボタンとしては「左寄せ」「中央揃え」「右寄せ」「配置なし」「編集」「削除」とありますが、重要なのは前3つです。
「左寄せ」ではimgタグにクラス【alignleft】が追加されます。
「中央揃え」ではimgタグにクラス【aligncenter】が追加されます。
「右寄せ」ではimgタグにクラス【alignright】が追加されます。

これを利用することで画像の横にテキストが回りこむレイアウトを作ることが可能になります。

.wp-editor .alignleft {
	float: left;
	margin: 0 10px 10px 0;
}
.wp-editor .alignright {
	float: right;
	margin: 0 0 10px 10px;
}
.wp-editor .aligncenter {
	display: block;
	margin: 0 auto;
}

「中央揃え」の時は回り込みは発生せず画像が中央配置になるだけの設定です。

テキスト装飾ボタン

入力範囲の上側にくっついてるやつですね。
領域のキャプチャ 1
テキスト装飾ボタンは対象テキストをドラッグした後にボタンをクリックすることで使用します。

・「太字」ボタン

領域のキャプチャ 3
テキストを

<strong></strong>

で囲みます。

– 結果 –
ダミーテキストダミーテキスト


・イタリック

領域のキャプチャ 4
テキストを

<em></em>

で囲みます。

– 結果 –
ダミーテキストダミーテキスト


・打ち消し

領域のキャプチャ 5
テキストを

<del></del>

で囲みます。

– 結果 –
ダミーテキストダミーテキスト


・番号なしリスト

領域のキャプチャ 6
テキストを

<ul>
<li></li>
</ul>

で囲みます。

– 結果 –

  • ダミーテキストダミーテキスト
  • ダミーテキストダミーテキスト

テキスト入力後【エンターキー】一回で次のリストに移動します。
【エンターキー】二回でリストを終了します。


・番号付きリスト

領域のキャプチャ 7
テキストを

<ol>
<li></li>
</ol>

で囲みます。

  1. ダミーテキストダミーテキスト
  2. ダミーテキストダミーテキスト



テキスト入力後【エンターキー】一回で次のリストに移動します。
【エンターキー】二回でリストを終了します。


・引用

領域のキャプチャ 8
テキストを

<blockquote></blockquote>

で囲みます。

– 結果 –

ダミーテキストダミーテキストダミーテキストダミーテキスト


・横ライン

領域のキャプチャ 9

<hr>

を挿入します。

– 結果 –
↓これ↓


・左寄せ

領域のキャプチャ 10
テキストを囲むp要素に

style="text-align: left;

を加えます。

– 結果 –

ダミーテキストダミーテキスト


・中央揃え

領域のキャプチャ 11
テキストを囲むp要素に

style="text-align:center;

を加えます。

– 結果 –

ダミーテキストダミーテキスト


・右寄せ

領域のキャプチャ 12
テキストを囲むp要素に

style="text-align:right;

を加えます。

– 結果 –

ダミーテキストダミーテキスト


・リンクの挿入/編集

領域のキャプチャ 13
テキストを

<a href=""></a>

で囲みます。

– 結果 –

ダミーテキストダミーテキスト


・リンクの削除

領域のキャプチャ 14
リンクを設定したテキストのリンクを外します。


・「続きを読む」タグを挿入

領域のキャプチャ 15

<!--more-->

こちらを挿入します。

ボタンの種類と処理の説明 -2段目-

領域のキャプチャ 16
↑こちらのボタンを押すとさらに使用できるボタンが増えます。

領域のキャプチャ 2

・下線

領域のキャプチャ 17

テキストを

<span style="text-decoration: underline;"></span>

で囲みます。

– 結果 –
ダミーテキストダミーテキスト


・両端揃え

領域のキャプチャ 18
テキストを囲むp要素に

style="text-align: justify;

を追加します。

– 結果 –

ダミーテキストダミーテキスト


・テキスト色

領域のキャプチャ 19
テキストを

<span style="color:選んだ色"></span>

で囲みます。

– 結果 –

ダミーテキストダミーテキスト


・テキストとしてペースト

領域のキャプチャ 20
他のテキストファイルなどからコピーしてきた文を貼り付ける際、元々装飾していたスタイルを完全に無視するモードに移行します。


・書式設定をクリア

領域のキャプチャ 21
テキストに付与してきたスタイルを無効にします。


・特殊文字

領域のキャプチャ 22
特殊文字を選びます。
領域のキャプチャ 31


・インデントを減らす/インデントを増やす

領域のキャプチャ 23領域のキャプチャ 24
インデントを減らしたり増やしたりします。必要ありません。


・取り消し/やり直し

領域のキャプチャ 25領域のキャプチャ 26
「取り消し」で一つ前の作業をする前に戻り「やり直し」で「取り消し」をやり直すことができます。


・キーボードショートカット

領域のキャプチャ 27

ショートカット集です。

必要ないボタンの削除

ボタンが多すぎても混乱を招くだけなので、ある程度機能をしぼったほうが良い時もあります。
そんな時はfunctions.phpに下記コードを追加します。

function tinymce_delete_buttons( $array ) {
	$array = array_diff($array, array( 'alignleft' , 'unlink'));
	return $array;
}
add_filter( 'mce_buttons', 'tinymce_delete_buttons' );
add_filter( 'mce_buttons_2', 'tinymce_delete_buttons' );

$array = array_diff($array, array( ‘alignleft‘ , ‘unlink‘));
青い部分を変更すればボタンを消していくことができます。

設定についてはこちらのサイト様をご確認ください。

http://memocarilog.info/wordpress/6374

ビジュアルエディタによるコードの装飾用cssまとめ

.wp-editor{
}
.wp-editor img {
	max-width: 100%;
	height: auto;
}
.wp-editor .alignleft {
	float: left;
	margin: 0 10px 10px 0;
}
.wp-editor .alignright {
	float: right;
	margin: 0 0 10px 10px;
}
.wp-editor .aligncenter {
	display: block;
	margin: 0 auto;
}
.wp-editor strong {
	font-weight: bold;
}
.wp-editor em {
	font-style: italic;
}
.wp-editor del {
	text-decoration: line-through;
}
.wp-editor blockquote {
	display: inline-block;
	padding: 1em;
	position: relative;
}
.wp-editor blockquote:before {
	content: '"';
	position: absolute;
	left: 0;
	top: 0;
}
.wp-editor blockquote:after {
	content: '"';
	position: absolute;
	right: 0;
	bottom: 0;
}
.wp-editor a {
	color: #00F;
	text-decoration: underline;
}
.wp-editor a:hover {
	color: red;
}
.wp-editor ul{
	list-style:disc;
	padding:0 0 0 1.5em;
}
.wp-editor ol{
	list-style:decimal;
	padding:0 0 0 1.5em;
}
.wp-editor h1{
	font-size:23px;
	font-weight:bold;
}
.wp-editor h2{
	font-size:20px;
	font-weight:bold;
}
.wp-editor h3{
	font-size:18px;
	font-weight:bold;
}

他のcssとバッティングする箇所が現れるかと思いますので注意してください。
.wp-editorにwidthやfont-size、font-familyなどを細かく設定することで記事投稿画面と投稿記事の見た目が同じになり、イメージ通りの投稿ができるようになります。

とても地味ですが、ここをキチンと作っておくとお客様満足度が上がると思いますので、なるべくやっていきたいところですね。

rss登録
このエントリーをはてなブックマークに追加