WordPress Postにダウンロードボタンを挿入_カスタムボタンスタイル

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

純コード版、Classic Editor推奨

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;
}

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

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

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

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

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

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