ボタン追加ページの視覚効果やユーザー體験を高めることができます。この記事では3つの方法を紹介します：HTMLの手動(dòng)挿入 歌で応える カスケーディングスタイルシート屬利用するプラグインと TinyMCE Advancedプラグインボタン機(jī)能の迅速な実裝.

方法1: HTMLとCSSを手動(dòng)で挿入します。

この方法は、プラグインに頼らず、HTMLやCSSを編集して完全にカスタマイズされたボタン効果を?qū)g現(xiàn)したいユーザーに適しています。

ステップ

1. テキスト」モードへの切り替え
   WordPressクラシックエディタを開(kāi)き、テキストタブをクリックしてテキストビューに移動(dòng)します。

2. HTMLボタンコードの追加
   ボタンを追加する場(chǎng)所に以下のコードを挿入します：<a class="custom-button" href="https://example.com" target="_blank">ここをクリック</a>ここです：
   • href = "/stock/stock_detail.html?ボタンのリンクアドレス。
   • target="_blank"新しいウィンドウで開(kāi)くように設(shè)定します。

3. カスタムCSSの追加
   外観 -> カスタマイズ -> 追加CSS」を開(kāi)き、以下のコードを追加してください：
   • これらのCSSプロパティ：
   • 背景色ボタンの背景色。
   • カラーボタンの文字色。
   • 詰め物內(nèi)マージンはボタンの大きさをコントロールします。
   • ボーダー半徑角丸効果。
   • ホバーマウスホバーでスタイル変更

.custom-button { background-color: #3498db; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 5px; display.inline-block; } .custom-button:hover { background-color: #2980b9; }.

4. 保存とプレビュー
   更新 "または "公開(kāi) "ボタンをクリックしてページをプレビューし、ボタンがどのように表示されるかを確認(rèn)してください。

方法2：プラグインを使ってボタンを追加

コードに詳しくない場(chǎng)合は、プラグインを利用することで素早くボタン機(jī)能を?qū)g裝することができます。

推奨プラグイン究極のショートコード

1. プラグインのインストール
   • WordPressダッシュボード -> プラグイン -> 新しいプラグインの追加.
   • 探す 究極のショートコード次に「インストール」をクリックし、プラグインを有効化します。

2. ボタン追加
   • 投稿やページを編集するには、エディターツールバーの "ショートコードを挿入「ボタン
   • リストから選択 "ボタン「オプション
   • ボタンテキスト、リンクアドレス、色、サイズなど、関連する屬性を入力します。
   • 挿入」ボタンをクリックすると、プラグインが自動(dòng)的に以下のショートコードを生成します：

[su_button url="https://example.com" target="blank" style="flat" background="#3498db" color="#ffff" size="5" radius="5"]ここをクリック[/urlsu_button].

3. 結(jié)果の保存と表示
   プラグインは自動(dòng)的にスタイルを適用し、フロントエンドでカスタムボタンの外観を直接見(jiàn)ることができます。

方法3：TinyMCE Advancedプラグインと組み合わせる

にあることが要求される場(chǎng)合 クラシックエディターツールバーボタンオプションを 高度なエディタツール プラグイン。

1. プラグインのインストール
   • プラグイン]->[新しいプラグインの追加]で検索します。 高度なエディタツール.
   • インストール」をクリックし、アクティベートしてください。

2. ツールバーのカスタマイズ
   • プラグインを有効化したら、「設(shè)定」→「高度なエディターツール」に進(jìn)みます。
   • ボタン」関連ツールをツールバーにドラッグします。

3. ボタン追加
   エディタでボタンオプションを選択し、ボタンテキスト、リンク、スタイルを編集します。

注意事項(xiàng)とヒント

• レスポンシブデザイン: ボタンがモバイルデバイスでうまく表示されるようにし、メディアクエリによって異なるスクリーンサイズに特定のスタイルを設(shè)定できるようにします。
• 読み込み速度の最適化: サイトのパフォーマンスに影響を與えないよう、不要なCSSコードを最小限にします。
• 安全性リンクの追加 rel="noopener noreferrer" 屬性を使用してセキュリティを強(qiáng)化し、悪意のある操作を防止します。

概要

WordPress Classicエディタにボタンを追加するには、いくつかの方法があります。手動(dòng)でHTMLとCSSを挿入することで、完全にカスタマイズされた外観を得ることができます。コーディングTinyMCE Advancedプラグインと組み合わせることで、新しいユーザーアカウントをツールバーのボタンの使用オプション

お問(wèn)い合わせ
チュートリアルが読めない？無(wú)料でお答えします！個(gè)人サイト、中小企業(yè)サイトのための無(wú)料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨詢：1025174874
三 Eメール：info@361sale.com
④ 勤務(wù)時(shí)間: 月～金、9:30～18:30、祝日休み