WordPressクラシックエディターにボタンを追加する方法

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

方法1: HTMLとCSSを手動で挿入します。

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

ステップ

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

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

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

.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. 保存とプレビュー
   更新 "または "公開 "ボタンをクリックしてページをプレビューし、ボタンがどのように表示されるかを確認してください。

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

コードに詳しくない場合は、プラグインを利用することで素早くボタン機能を実装することができます。

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

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

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

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

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

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

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

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

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

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

注意事項とヒント

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

概要

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