最近、読者の一人からWordPressテーマにCSSゴーストボタンを追加する方法についてチュートリアルを求められました。ゴーストボタンは、最近とても人気のある透明なコールトゥアクションボタンです。この投稿では、CSSとHTMLをほとんど使わずにWordPressテーマにCSSゴーストボタンを簡単に追加する方法を紹介します。
ゴーストボタンとは？
ゴーストボタンとは、ウェブデザインの用語で、背景に溶け込み、枠線によってのみ目立つ透明なボタンのことです。
WordPressでアクションボタンを作成するのはとても簡単です。CSSやHTMLを書かずに投稿やページに追加することもできる。ゴーストボタンは新しいトレンドなので、ゴーストスタイルのボタンを作成するプラグインは特にありません。
WordPressでゴーストボタンを追加する
前述したように、WordPressテーマにゴーストボタンを追加するには、ほんの少しのCSSとHTMLを使用する必要があります。
まず、テーマまたは子テーマのスタイルシートに以下のCSSコードを追加します。
Webサーバーに接続するには、FTPクライアントが必要です。接続したら、/wp-content/themes/Your-Theme/フォルダに行き、style.cssファイルを見つけます。このファイルを開いてテキストエディターで編集し、このコードスニペットをファイルの一番下に貼り付けます。 (WordPressでウェブからコード・スニペットを貼り付ける方法についてはさらに詳しく）。
[cbk1］
変更を保存し、ファイルをサーバーにアップロードします。
これで、ボタンを表示したいときは、すべてclass=”ghost-button “を追加するだけでよい。
例えば、ダウンロード・リンクを追加したい場合は、通常と同じようにダウンロード・リンクを作成します。次に、テキストエディターに切り替えて、HTMLフォーマットを確認します。
ダウンロード・リンクのHTMLコードを探し、次のようにCSSクラスを追加します：
<a href="http://example.com/downloads/" class="ghost-button">今すぐダウンロード</a>。
投稿を保存または更新し、プレビューしてください。古いリンクの代わりに美しいゴーストボタンが表示されます。
この投稿がWordPressテーマにゴーストボタンを追加する方法を学ぶのにお役に立てば幸いです。ショートコードを使わずにWordPressにボタンを追加する方法については、こちらもご参照ください。
この投稿が気に入ったら、WordPress動画チュートリアルのYouTubeチャンネルに登録してください。Twitterや Facebookでも私たちを見つけることができます。
mahmut tanık
Hi , thanks for great sharings. I’ve researching for a long time.
How can i add customization button on my wp website ? Customization button i mean see on theme demo sites right or left side there is a button when click you can change theme style or color .
WPBeginner Support
Hi Mahmut,
In most WordPress themes you can do that by visiting theme’s options page or by visiting Appearance » Customize page in WordPress admin area.
管理者
Dinesh Fernando
Thanks, useful code – worked nicely on a live project.
shravan upadhayay
Great post . thanx for sharing.