2015.05.27
【Xeory Extension】DeFoMダウンロードページ制作情報
残念ながら、制作したサイトは現在閲覧が出来ません。
先日オープンしたばかりの動画製作者である梅津真琴さんの個人サイト「DeFoM」。作成した各ページやカスタマイズ情報を書いていこうと考え、今回が第一弾の記事となります。
カスタマイズ箇所が多い点から数回にわけ、ポイントを絞りながらカスタマイズ情報を掲載していきたいと思います。
初回である今回は「ダウンロードページ」に絞り、使用したプラグインやカスタマイズ箇所を掲載していきたいと思います。
スポンサーリンク
目次
ダウンロードページが出来るまで
基本情報
本日紹介を行うダウンロードページですが、「動画用素材」「ゲーム用素材」をダウンロード出来る環境が欲しいということで「カスタム投稿タイプ」で制作を行いました。
使用テーマ
Xeoryはコンテンツマーケティングに特化した無料のWordPressテーマです。もちろん内部SEOも最大限まで最適化しているので、このテーマを使って、良質な記事を届けて行けば自然と多くのアクセスを得られるようになっています。
上記が制作をしたサイトで、テーマはバズ部さんの「Xeory Extension」を使用しています。デフォルトでも十分に魅力的なテーマですが要望もあり、カスタマイズを行いました。
ダウンロードページ使用プラグイン一覧
Custom Post Type UI
Admin UI for creating custom content types like post types and taxonomies
カスタム投稿タイプを簡単に作成することが出来るプラグインです。DeFoMでは、「ダウンロード（dl）」という新しい投稿タイプを作成することで各種素材を管理しています。
通常の投稿記事や固定ページでも作成が出来たのですが、管理面やレイアウトの変更の容易さなどからカスタム投稿タイプとしてダウンロード素材記事を制作しています。
- archive-dl.php
- single-dl.php
- taxonomy-genre-game.php
- taxonomy-genre-movie.php
上記のphpファイルを制作し、現在の表示を実現しています。
参考サイト様
Download Manager
This File Management & Digital Store plugin will help you to control file downloads & sell digital products from your WP site.
ダウンロード素材の管理やダウンロード数の表示が可能になるプラグイン。プラグイン無しでも可能ですが、表示のしやすさや管理のしやすさからプラグインを利用しています。
こんな感じで、「素材名」「ダウンロードアイコン」「素材サイズ」などをショートカットで簡単に表示することが可能です。表示方法も複数選択が可能なので表示に便利なプラグインになっています。
ショートコードで表示が可能なので、HTMLやPHPがよくわからなくても簡単に表示が可能になっています。
参考サイト様
WP Canvas – Shortcodes
A plugin that adds a useful family of shortcodes to your WordPress theme.
ショートコードで様々なことが出来るようになる多彩なプラグインです。ダウンロードページでは、下記の部分で使用をしています。
①画面を二分割
[wc_row][wc_column size="one-half" position="first"] 左側に表示される要素を書く [/wc_column][wc_column size="one-half" position="last"] 右側に表示される要素を書く [/wc_column][/wc_row]
②タブを表示
[wc_tabgroup layout="box"] [wc_tab title="タブに表示される文字①"] タブに表示される文字①をクリックした際に表示される内容 [/wc_tab] [wc_tab title="タブに表示される文字②"] タブに表示される文字②をクリックした際に表示される内容 [/wc_tab] [/wc_tabgroup]
③記事一覧をグリッド表示
[wc_posts author="" author_name="" p="" post__in="" order="DESC" orderby="date" post_status="publish" post_type="dl" posts_per_page="18" taxonomy="" field="slug" terms="" title="yes" meta_all="yes" meta_author="no" meta_date="no" date_format="no" meta_comments="no" thumbnail="yes" content="no" paging="yes" size="wccarousel" filtering="yes" columns="3" gutter_space="20" heading_type="h2" layout="grid" template="box" excerpt_length="0"][/wc_posts]
上記のショートコードをカスタム投稿タイプを表示させるために作成した「archive-dl.php」に埋め込んで表示しています。通常ではphpでショートコードの利用は出来ませんが下記のようにすると利用が可能になります。
<?php echo do_shortcode('ここに使いたいショートコード'); ?>
この表示方法は便利なので、非常にオススメです。
参考サイト様
Widget Logic
Widget Logic lets you control on which pages widgets appear using WP's conditional tags.
細かくウィジェットの表示をコントロール出来るプラグインです。実際にページを見て頂ければわかりますが「ダウンロードコンテンツ」というウィジェットはダウンロード関連のページのみに表示されます。
ダウンロードページ以外でも使用している、非常に便利なプラグインです。上記の画像はダウンロード関連のみに表示されるように設定をしています。
カスタム投稿で制作したダウンロード関連の記事と固定ページで制作した利用規約のページに表示するようにしています。「Widgetlogic:」と書かれた部分に表示方法を記載します。
参考サイト様
プラグイン以外のカスタマイズ
タクソノミーの説明文の追加
こんな感じで説明文を挿入しています。各種タクソノミー毎に説明文を入れることで、内容のわかりやすさ、利用規約へのスムーズなリンクを実現しています。
WordPressのカテゴリーページに「説明」を表示する方法を、クラシックテーマとブロックテーマそれぞれで解説します。
上記サイト様の方法を再現しただけです。
同じ方法でタクソノミーにも説明文の挿入が可能になります。
前後記事の表示
前後に投稿した記事があった方がわかりやすいと判断して導入しています。通常の記事ページでも同じく導入を行っています。
上記のサイト様の内容を参考にCSSと一部内容を調整して表示しています。
まとめ
DeFoMダウンロードページ制作情報とXeory Extensionのカスタマイズ情報でした。
今回はカスタマイズ記事の第一弾になります。
Xeory Extensionは非常にいじりがいのある面白いテーマなので、全3～4回程度の構想で記事を書いております。近日中に第二回目の記事を書かせて頂きますのでよろしくお願いします！
改めてですが、この記事の主役である2つのサイトを紹介させて頂きます。
wordpress無料テーマXeory Extension配布元様：Xeory-無料WordPressテーマ-
梅津真琴さんの動画制作サイト：DeFoM
それでは、本日は失礼します！
created by Rinker
¥500
(2025/01/20 21:27:17時点 Amazon調べ-詳細)
この記事をお届けした
O3 WEBの最新ニュース情報を、
いいねしてチェックしよう！
O3 WEBの最新ニュース情報を、
いいねしてチェックしよう！
スポンサーリンク
関連記事