WordPressでファイルを簡単にダウンロードする方法(プラグインなし)

 2014/09/16

WordPressでファイルダウンロードの管理を行うことができるプラグインDownload Manager。最近使い始めて資料などを簡単にダウンロードできるように設定できて便利だなーと思っていた矢先。バージョン2.6.93へのアップデートを行ったところ、こちらで使用しているテーマSTINGER5でレイアウトが崩れてしまいました。ダウンロードを提供している数も少ないのでプラグインの使用をやめメディアライブラリでダウンロードファイルを管理することにしました。

スポンサーリンク

Download Managerをアップデートしたらレイアウトが崩れた(STINGER5使用)

レイアウトが崩れたのはSTINGER5でのページャー部分。ローカルでデフォルトの状態で試したのですがやはりページャー部分がおかしくなりました。STINGERの他のバージョンは未確認です。他のテーマでは何も問題はなかったのでプラグインのCSS部分が影響しているのかもしれません。

downloadmanager1

画像挿入の手順とほぼ同じ

始めにダウンロードしたいデータをファイルに保存しZIPに圧縮します。

圧縮解凍ソフトと言えばコレLhaplus

次にメディアライブラリにZIPファイルをアップロード。

ダウンロードのリンクを置きたいところに画像を挿入する手順で【メディアを追加】を行えばOKです

ダウンロード

aタグにclassを指定してボタンっぽくする

下記のようにメディアライブラリに置いたファイルのリンクにクラスを指定します。

< a href="http://●●.com/wp-content/uploads/2019/09/●●.zip" class=”button”>ダウンロード

ボタンのスタイル(例)

.button {
-moz-box-shadow: 3px 4px 0px 0px #8a2a21;
-webkit-box-shadow: 3px 4px 0px 0px #8a2a21;
box-shadow: 3px 4px 0px 0px #8a2a21;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24437));
background:-moz-linear-gradient(top, #c62d1f 5%, #f24437 100%);
background:-webkit-linear-gradient(top, #c62d1f 5%, #f24437 100%);
background:-o-linear-gradient(top, #c62d1f 5%, #f24437 100%);
background:-ms-linear-gradient(top, #c62d1f 5%, #f24437 100%);
background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24437',GradientType=0);
background-color:#c62d1f;
-moz-border-radius:18px;
-webkit-border-radius:18px;
border-radius:18px;
border:1px solid #d02718;
display:inline-block;
cursor:pointer;
color:#ffffff;
padding:7px 25px;
text-decoration:none;
}
.button:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24437), color-stop(1, #c62d1f));
background:-moz-linear-gradient(top, #f24437 5%, #c62d1f 100%);
background:-webkit-linear-gradient(top, #f24437 5%, #c62d1f 100%);
background:-o-linear-gradient(top, #f24437 5%, #c62d1f 100%);
background:-ms-linear-gradient(top, #f24437 5%, #c62d1f 100%);
background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24437', endColorstr='#c62d1f',GradientType=0);
background-color:#f24437;
color:#ffffff;
}
.button:active {
position:relative;
top:1px;
}

ダウンロード

こんな感じのダウンロードボタンが出来ます。Download Managerのようにカウントやパスワードは付けられませんが、簡単な配布物であればこんな感じでもいいかもしれません。また、プラグインに不具合が出たらダウングレードさせるという手もありますね。プラグインのダウングレードはこちらのサイトが参考になりました。

WordPressプラグインをダウングレードさせる方法(古いバージョンをダウンロードする方法)

まとめ

確認できたのはSTINGER5でページャーのみだったのですが、アップデートは一度ローカルで試した方がいいですね。ローカル環境は簡単なのがいろいろ出ていますが、複数のWordPressの環境が作れるXAMPPがわたしはおすすめです。

WordPressの更新はローカルで試してから!XAMPP導入とWordPressのインストール

それでは100日チャレンジも13日目。ちゅんこ@shufulifeがお送りしましたー。

WordPress

Please comment!

  

Messege




現在トラックバックはありません。