WordPress記事へのダウンロードボタン挿入_カスタムボタンスタイル

サイト構築後記事を投稿する際にダウンロードリンクやデモアドレスを提供する機会がよくありますが、デフォルトのハイパーリンクを挿入するのは見栄えが良くありません。記事にきれいなダウンロードボタンを挿入するにはどうすればよいでしょうか？2つの簡単な方法を紹介します。

純粋なコードバージョン、クラシックエディターにおすすめ

Naiba サイト構築ノートのダウンロードボタンは、コードを使用して実装されています。サイト構築ノート実装方法も簡単で、ダウンロードボタンのCSSスタイルを個別に設定するだけです。使用方法は以下の通りです：

1. CSSスタイル内にダウンロードボタンのCSSスタイルを作成します；
2. 記事を投稿する際に、class属性値を持つaタグを挿入します。

Naiba サイト構築ノートのウェブサイトで使用されているダウンロードボタンのCSSは以下の通りです：

.theme-demo {
    border-radius: 5px;
    color: #ffffff!important;
    display: inline-block;
    margin-right: 10px;
	  margin-bottom: 10px;
    padding: 10px 15px;
	background-color: #3bc492;
	text-decoration: none!important;
	text-indent: 0!important;
}

あなたのテーマのCSSスタイルファイルに追加します。方法：

1. WP管理画面、外観、テーマエディター。
2. 上記の内容をコピーしてstyle.cssの末尾に追加し、保存します。

ダウンロードボタン内にダウンロードアイコンなどを挿入したい場合は、対応するCSSスタイルを自分で追加すればOKです。このサイト上には多くの美しいボタンスタイルがありますので、いくつかコピーすることができます。 このようにコードを挿入するのは面倒だ、毎回手動でclass="theme-demo"をリンクに追加したり、手動でコードをコピーしたりしなければならない、と言うかもしれません。 慌てずに、この記事をご覧ください：WordPressエディター強化_特定コードの迅速挿入：AddQuicktag

システム標準ボタン、Gutenbergエディター推奨

Gutenbergエディターを使用している場合は、これほど面倒ではありません。直接ボタンを挿入するだけで済みます。方法は以下の通りです： 1、記事を投稿する際、➕ボタンをクリックし、次にボタンを検索します。下図の通り：2、ボタンを挿入した後、右側のブロックエリアでボタンのスタイル、色を設定し、リンクを追加すると、美しいダウンロードボタンが出来上がります。Gutenbergエディター内のバージョンでボタンをこれほど丸くしたくない場合は、右側の設定で、ボーダー半径を小さく調整するか0にするだけでOKです。 リソースダウンロードサイトを構築している場合は、専用のダウンロードプラグインをインストールすることもできます。美しいダウンロードボタンも付いており、リソース管理も便利です。

• 6つのWordPressリソースダウンロード管理プラグイン_簡単にソフトウェアダウンロードサイトを構築