WordPressでホームページを作るには

WordPressのテキストモードでタグボタンを追加する方法

投稿日:2019年10月17日 更新日:

Web担当業務でクライアントサイトに見出しや太字などのタグがリセットされていたのでCSSの設定した際に、エディタ上のテキストモードでタグボタンを追加する方法を解説します。

 


下記画像の青枠、見出しと太字を挿入できるようになりました。

画像、一番上の青枠、タグボタンを押すと、該当したテキストコードが挿入されます。

このタグボタンの追加設定の方法を解説します。

functions.phpに下記ソースは追記します。

/* テキストエディタのツールバーのボタン追加 */
function custom_add_quicktags() {
if (wp_script_is('quicktags')){
?>
<script>
QTags.addButton( ID, ボタンテキスト, 開始タグ, 終了タグ, アクセスキー, タイトル, 優先順位(1が先頭) );
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'custom_add_quicktags' );

ソースコードの解説

ソースコードの下記の部分に必要なタグの設定をします。

QTags.addButton( ID, ボタンテキスト, 開始タグ, 終了タグ, アクセスキー, タイトル, 優先順位(1が先頭) );

 

たとえば、h2なら、下記です。

QTags.addButton( ‘h2’, ‘h2’, ‘<h2>’, ‘</h2>’, ”, ‘h2タグ’, 1 );

 

入力する項目は、下記の通りです。

ID ダブらない名前(半角英数字)
ボタンテキスト ボタンの表示名
開始タグ 1度目にボタンを押した時に挿入するタグ
終了タグ 2度目にボタンを押した時に挿入するタグ
アクセスキー 通常、空欄で大丈夫です
優先順位(半角数字) ボタンの位置を任意の位置にしたい時に使用します

 
以上です。

 

 
 






Web制作+Webマーケティングの個別講座開講中

Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております


・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
・Googleアナリティクスの設定、分析から改善施策の立案、レポート作成まで自身でしたい方

どうぞWeb365の「Webサイト制作、Webマーケティングの知識スキル習得するためのオーダーメイド個別講座」をご覧ください。






外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。

Web365は貴社のWeb担当者として、制作改善運用をワンストップサポートしています

・成果にこだわるサイト制作改善をお望みの方
・自社にとって最適なweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方


是非Web365までご相談ください。

【パートナー募集】
Web制作、Webコンサル、広告代理店、フリーランスの方々へのWeb改善プランの提供

Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています

・クライアントへのWebマーケティング、Web改善のプラン検討している方
・社内のWebマーケティングのリテラシーを高めたい方
・分析から改善運用まで一括でサポート依頼したい方

Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています

・クライアントへのWebマーケティング提案がしたいプラン作成をサポート
・クライアントへのWeb改善プラン実行のディレクションサポート
・社内のGoogleアナリティクスなどのレクチャー
・クライアントへのサイト分析から改善運用企画のアドバイザリーサポート
・Web系フリーランスへのWeb改善プランの提案企画書の作成サポート
・クライアントへのWeb広告運用代行
・クライアントへの計測ツール設定代行(Googleアナリティクス、eコマース、ヒートマップClarityなど)


まずは、お気軽にMTGでれきばと思いますので、Web365までご相談ください。

WordPressでホームページを作るには

執筆者:

関連記事

【解説】EC機能内製化の検討例と7.27%のコストカット試算事例

クライアント事例として、自サイトでEC機能(eコマース、つまりオンラインショップ)内製したいときのリニューアル検討についての調査と意思決定についての流れを解説します。 Web365とは Web365は …

【解説】WordPressの保守、バックアップのプラグイン BackWPupをいれておこう

【解説】WordPressの保守、バックアップのプラグイン BackWPupのいれ方、バックアップ方法の一例を解説します。 クライアントサイトで対応例です。   Web365とは Web365は、外部 …

インタビュー方法

【コピペ】特定テキストにマウスがhoverしたときに背面に文字を出すCSS

特定テキストにマウスがhoverしたときに、背面に関連の文字を出したいときってありませんか? 少しのCSSでサクッと対応できます。もちろんコピペできます。 特定テキストにマウスがhoverしたときに背 …

aタグカット、下層要素残し、jQueryでの方法

【コピペ】aタグだけをカットして、その下層の要素は残したいときのjQueryで対応方法

aタグだけをカットして、その下層の要素は残したいときのjQuerで対応方法です。 用途としては、 ・aタグが勝手に挿入されていたバグ などで取り急ぎ対応しました。 Web365とは 本題のまえに、自己 …

画像のサイズの変更、データ量の圧縮などあれこれできる便利サイトのご紹介

記事やサイトを作成する際に、画像のサイズの変更や、データ量を軽くするための圧縮などしたいときに簡単にできるサイトをご紹介します。サイズや圧縮以外にもあれこれできる便利サイトです。   この記 …

コピーライティングで悩んだときの15の考え方

自社の商材をPRする際に、どう表現していいか悩むこともあるかと思います。アイデアのたたき台として、コピーライティングで悩んだときの15の考え方を解説します。 Web365とは Web365は、外部We …

【コピペ】WordPress、Contact Form7のカスタマイズ、チェック項目に合わせて次の項目を表示させる方法

【コピペ】WordPress、Contact Form7のカスタマイズ、作成する方法

コピペでできる、【コピペ】WordPress、Contact Form7のカスタマイズ、チェック項目に合わせて次の項目を表示させる方法の解説です。 なぜ必要か? 問い合わせ項目のより具体的な取得をした …