Affinger

アフィンガー5(WING)エディタのデフォルトタグ消去・編集方法まとめ

ビジュアルエディタ タグ整理

WING(アフィンガー5)はすごく使いやすいWordpressテーマ!

ですが、ノートパソコンで作業してるとちょっと使いづらさを感じたことありませんか?それはもしかしたら、画面が小さくて記事の編集作業がしづらいからかもしれません。

また、「自分がほしいタグがあるのにエディタ画面にない!」という悩みもありがち。

この記事ではWINGでエディタ画面の作業スペースを広げたり、タグを編集するためのやり方

  • 管理画面や無料プラグインを利用して手軽にできる方法
  • ソースコードをいじるちょっと手の込んだやり方

の2パターンで紹介します。

WINGで作業効率をもっと上げたい・・!と考えている方は参考にしてみてください。

 

 WING(アフィンガー5)で記事作成を効率化するために

 作業効率のカギを握るエディタ画面

エディタは、Wordpressで記事を投稿・編集するための画面。作業に直結する部分なので、使いやすければ記事を書くのが速くなりますし、逆なら遅くなることに。

WINGをはじめとした有料のWordpressテーマだと、エディタ画面は最初から使いやすく工夫されていたりします。

なので

そのまま使ってても大して変わらないでしょ~?

と思われる方もいるかもしれません。

が、長くブログを運営して多くの人に読んでもらいたいなら、記事の投稿・編集は毎日の作業。細かい部分での作業のしやすさが更新頻度、さらにはヤル気にも直結していきます。

なので、エディタ画面をいかに使いやすくするか?というのは、実際やり始めてみるとすごく重要な要素になってくるのです。

 

 エディタ画面は2種類

WordPressには2種類のエディタ画面があり、WINGも例外ではありません。それぞれのエディタを簡単に紹介します。

 

 WINGのビジュアルエディタ

WINGビジュアルエディタ

ビジュアルエディタでは「実際サイトに表示される画面」に近い形での編集ができます。

記事の完成形をイメージしながら作業できるので、初心者の方でも使いやすい。普段はビジュアルエディタを使った方が作業がしやすいです。

 

 WINGのテキストエディタ

WINGテキストエディタ

テキストエディタは「HTML言語」と呼ばれるWebページ作成のための言語にて編集を行う画面です。

実際のサイト表示は

  • HTML
  • CSS
  • JavaScript

などで書き込まれたソースファイルがブラウザで処理されることによって行われています。

つまりテキストエディタでは、大元のソースを直接編集して記事を作っていくことになります。

時と場合によってはこちらの方が作業がやりやすいこともありますが、HTML言語をある程度理解していないと難しい。どちらかというと上級者向けと言えるでしょう。




 

 エディタのタグとは

WINGではデフォルトでどちらのエディタでも、記事の装飾パーツを簡単に挿入するための「タグ」が用意されています。

タグを使えば、例えば太赤字とか赤マーカー、さらには

こんな吹き出し

 

に至るまで1クリックで挿入が可能。うまく使うことによって、作業を劇的に効率化することができるのです。

が、そんな便利なタグですが、場合によっては問題となることがあります。

 

 エディタのタグが問題になるケース

タグはとっても便利なのですが、編集をしだすと個人の好みによってあまり使わないタグも出てきます。

で、その時に問題となるのが「不要なタグによる編集画面の圧迫」

デスクトップで画面の大きなパソコンを使っている分には良いですが、ノートパソコンなど小さな画面で記事を書く時には、使える編集範囲も限られてしまいます。

邪魔なタグが多すぎると編集画面が圧迫されて小さくなり、全体が把握しにくく編集が捗らなくなるのです。

テキストエディタ狭い

 

 不要なタグを消せれば作業効率UP

ということで、タグは必要なものだけ編集画面に置いておくのが作業効率的にベスト。あまり使わない不要なものがあれば消してしまいましょう。

ではWINGでは、どのようにすればタグを消したり編集できるのか?を順に紹介していきます。

 

 テキストエディタのタグ消去・編集方法

まず、テキストエディタのタグ。2通りの編集方法があります。

 

 「AddQuick tag」プラグインを使った編集

AddQuick tag」という無料のプラグインで、テキストエディタのタグを消すことができます。やり方はプラグイン管理画面から、不要なものにチェックを挿入すればOK。

AddQuick tag削除

 

ちなみに、「AddQuick tag」ではタグを消すだけでなく、追加することも可能。よく使うコードをあらかじめ書いて登録しておけば、作業が捗りますよ。

AddQuick tag追加

 

タグ追加は、テキストエディタだけでなく、ビジュアルエディタにも可能です。

ビジュアルエディタ タグ追加

 

 AFFINGER5管理画面からの編集

WING(アフィンガー5)用に用意されているタグに関しては、「Affinger5管理」「投稿・記事設定」から不要なものは消すことができます。

Affinger5管理画面編集

 

「オリジナルボタンを全て表示しない」にチェックすればタグを全て消すことも可能。ただ、この場合、ビジュアルエディタのWINGデフォルトタグも全て消えてしまうので注意が必要です。

 

ビジュアルエディタのタグ消去・編集方法 

次に、ビジュアルエディタのタグの編集。

  • プラグインを使う方法
  • テーマのソースコードをいじる方法

の2パターンを紹介します。

 

 「TinyMCE Advanced」プラグインを使う方法

まず、プラグインを使う方法。

TinyMCE Advanced」というプラグインを導入すると、設定画面でビジュアルエディタの一部分のタグの追加・消去をすることができます。

TinyMCE Advanced画面




 

 ソースコード改変によるWINGデフォルトタグの消去

上記の通り、「TinyMCE Advanced」プラグイン設定画面でビジュアルエディタのタグは部分的に消去・追加が可能です。

ですが、ビジュアルエディタのWINGデフォルトタグは、テキストエディタのタグのようにAffinger5管理画面から簡単に消せるようにはなっていません。

そこで、テーマのソースコードを少しいじることで部分的に消去する方法を紹介します。

注意点

ソースコードをいじるので、テーマが更新されるたびに同じ作業が必要だったり、他にも思わぬエラーを引き起こす可能性があります。実施する場合は上記留意して自己責任でお願いします。

 

step
1
「外観」「テーマの編集」

ビジュアルエディタタグ消去1

 

step
2
WING親テーマを選択

ビジュアルエディタタグ消去2

 

step
3
functions.phpを選択

ビジュアルエディタタグ消去3

 

step
4
5300~5400行あたりへ移動

5350行あたりにビジュアルエディタのタグについてのプログラム記述がされています。(Affinger5のバージョンにより、さらに後ろへ移動している可能性があります。)

if ( !function_exists( 'st_tiny_mce_visual_buttons' ) ) {
function st_tiny_mce_visual_buttons( $buttons ) {
$custom_buttons = array(
'st_listbox_1' => PHP_INT_MAX,
'st_button_huto' => PHP_INT_MAX,
'st_button_hutoaka' => PHP_INT_MAX,
'st_button_ymarker' => PHP_INT_MAX,
'st_button_count' => PHP_INT_MAX,
'st_button_photoline' => PHP_INT_MAX,
'st_button_kadomaru_bg' => PHP_INT_MAX,
'st_btnlink_main' => PHP_INT_MAX,
'st_btnlink_sub' => PHP_INT_MAX,
'st_button_blogcard' => PHP_INT_MAX,
'st_button_st_rankgroup' => PHP_INT_MAX,
'st_button_st_af_cpt' => PHP_INT_MAX,
'st_button_st_af_slug' => PHP_INT_MAX,
'st_button_st_toc' => PHP_INT_MAX,
);

の記述がされている部分を探してみてください。編集するために移動。

 

ビジュアルエディタタグ消去4

 

step
5
不要なタグを消す

不要なタグのテキストを消去。今回は太字黄細マーカーのタグのテキストを消してみました。

ビジュアルエディタタグ消去5

 

で、最後に「ファイルを更新」をクリック。投稿画面に戻ると

変更前

変更前

 

変更後

変更後

 

太字黄細マーカーのタグが消え、タグがスッキリ一行にまとまりました。

 

 WINGのタグ消去・編集方法まとめ

WordPressテーマのWINGでは、上記のような方法でエディタのタグ編集をすることができます。

自分の使いやすいようにカスタマイズすれば、作業効率が上がること間違いなし!特にノートパソコンなど、小さい画面で記事を書いている人にはオススメです。

やっていない人は、ぜひ試してみてください。

 

マストツール!な商品紹介リンク

あなたのサイトで商品を紹介するのに、こんなリンクを作成して使ってみたくありませんか?

手間なくカンタンに、無料ツールで作れる方法を下記のページで解説しています!

必須!
amazon 楽天 yahoo 商品リンク ブログ
ブログにアマゾン・楽天・ヤフーの商品紹介リンクを貼る一番ラクな方法

この記事は 「Amazonや楽天、Yahooショッピングの商品リンクを、自分のブログやサイトに、手軽かつスマートに設置したい!」方向けのまとめになります。 リンク一つ作るのにも、使うツールが良くないと ...

続きを見る

-Affinger
-,