Love2Labo

日常の些細なことやどうでもいいことをあなたに。たまに Wordpress カスタマイズ。

WordPress

[WP]ビジュアルエディタでよく使うスタイルをボタン化するカスタマイズ

投稿日:2014/09/30 更新日:

朝が弱い分、夜に強いあめたま(@ametama_l2l)です、こんばんわ。

前回の記事でフォントサイズはプラグインなしで選択できるようになりました。

[WP]ビジュアルエディタ画面でプラグインを使わずにフォントサイズを変更するカスタマイズ

 

実はTinyMCEは他にもいろいろカスタマイズできるんです。

今日は「よく使うスタイル」を登録してプルダウンで選択できるようにカスタマイズしちゃいましょう。これでブログ更新の効率がさらにアップ!1日1記事どころか2記事も3記事も書けちゃうはず!!(効果は個人の感想です。記事がたくさん書けることを保障するわけではありませんヘ(゚∀゚ヘ)アヒャ)

 

スポンサーリンク

 

目標:エディタ画面にスタイルを選択するプルダウンメニューを追加する

完成予定図

wp_tinymce_style

 

スタイルを作成する

今回作成するスタイルは2つ。

  1. 引用元表記
  2. 注意書き

引用元の表記はこんな感じになります。

wp_tinymce_style_01

 

で、注意書きはこんな感じです。

wp_tinymce_style_02

 

CSSファイルにクラスを追加する

引用元のCSSはこんな感じ。単純に右寄せとフォントを少し小さめで表示します。

 

で、こちらが注意書き用。ちょっとWebフォントとか使ってます。あとネガティブマージンとか。CSSの説明は質問とかがあれば後日やります( ´,_ゝ`)イ ヒ

 

function.phpにコードを追加する

functions.phpを変更するとサイト全体が動かなくなることがあります。作業前にバックアップを取ることを強くおすすめします。

前回の記事で追加したところに追加していきます。今回もメニューの追加と設定部分の追加の2段階です。

 

1.スタイル選択用プルダウンメニューを追加する

前回の「fontsizeselect」の前に「styleselect」を追加しました。

これでメニューが追加されます。が、中身はまだない。次に選択するスタイルを追加します。

 

2.選択したスタイルの中身を追加する

ちょっと長いですが超簡単に説明。

  • title:プルダウンメニューに表示されるスタイル名です。日本語でもOK。
  • block / inline:追加する要素です。divならブロック、spanならインラインって感じですかね。
  • classes:クラス名です。CSSで設定したクラス名を設定しましょう。
  • wrapper:謎ですヘ(゚∀゚ヘ)アヒャ とりあえず「TRUE」で動いてます。

一応、調べたんですよ!でも英語ばっかで…。翻訳しながら途中で投げ出しました。これも要望あれば…いや気が向いたらってことで。

 

これでスタイルも選択できるようになりました。

スタイルぐらいタグ書けばいいんですけど、長いクラス名とか付けたときに入力ミスは減らせます!それが一番のメリットでしょうか。

ふー、ちょっとIT系な感じが漂って来ましたかね?あめまた(@ametama_l2l)でした(*´艸`)ウフフ

 

-WordPress
-,

Copyright© Love2Labo , 2016 AllRights Reserved Powered by AFFINGER4.