【Xeory Extension】DeFoMダウンロードページ制作情報

残念ながら、制作したサイトは現在閲覧が出来ません。

先日オープンしたばかりの動画製作者である梅津真琴さんの個人サイト「DeFoM」。作成した各ページやカスタマイズ情報を書いていこうと考え、今回が第一弾の記事となります。

カスタマイズ箇所が多い点から数回にわけ、ポイントを絞りながらカスタマイズ情報を掲載していきたいと思います。

初回である今回は「ダウンロードページ」に絞り、使用したプラグインやカスタマイズ箇所を掲載していきたいと思います。

スポンサーリンク

ダウンロードページが出来るまで

基本情報

本日紹介を行うダウンロードページですが、「動画用素材」「ゲーム用素材」をダウンロード出来る環境が欲しいということで「カスタム投稿タイプ」で制作を行いました。

使用テーマ

https://xeory.jp/

上記が制作をしたサイトで、テーマはバズ部さんの「Xeory Extension」を使用しています。デフォルトでも十分に魅力的なテーマですが要望もあり、カスタマイズを行いました。

ダウンロードページ使用プラグイン一覧

Custom Post Type UI

https://wordpress.org/plugins/custom-post-type-ui/

カスタム投稿タイプを簡単に作成することが出来るプラグインです。DeFoMでは、「ダウンロード(dl)」という新しい投稿タイプを作成することで各種素材を管理しています。

通常の投稿記事や固定ページでも作成が出来たのですが、管理面やレイアウトの変更の容易さなどからカスタム投稿タイプとしてダウンロード素材記事を制作しています。

  • archive-dl.php
  • single-dl.php
  • taxonomy-genre-game.php
  • taxonomy-genre-movie.php

上記のphpファイルを制作し、現在の表示を実現しています。

参考サイト様

Download Manager

https://wordpress.org/plugins/download-manager/

ダウンロード素材の管理やダウンロード数の表示が可能になるプラグイン。プラグイン無しでも可能ですが、表示のしやすさや管理のしやすさからプラグインを利用しています。

defom-download01

こんな感じで、「素材名」「ダウンロードアイコン」「素材サイズ」などをショートカットで簡単に表示することが可能です。表示方法も複数選択が可能なので表示に便利なプラグインになっています。

ショートコードで表示が可能なので、HTMLやPHPがよくわからなくても簡単に表示が可能になっています。

参考サイト様

WP Canvas – Shortcodes

https://wordpress.org/plugins/wc-shortcodes/

ショートコードで様々なことが出来るようになる多彩なプラグインです。ダウンロードページでは、下記の部分で使用をしています。

defom-download02

実際のページで確認:http://defcon.movillust-kaido.com/dl/zangeki-2/

①画面を二分割

[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]

defom-download03

実際のページで確認:http://defcon.movillust-kaido.com/dl/

③記事一覧をグリッド表示

[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

https://wordpress.org/plugins/widget-logic/

細かくウィジェットの表示をコントロール出来るプラグインです。実際にページを見て頂ければわかりますが「ダウンロードコンテンツ」というウィジェットはダウンロード関連のページのみに表示されます。

defom-download04

ダウンロードページ以外でも使用している、非常に便利なプラグインです。上記の画像はダウンロード関連のみに表示されるように設定をしています。

defom-download05

カスタム投稿で制作したダウンロード関連の記事と固定ページで制作した利用規約のページに表示するようにしています。「Widgetlogic:」と書かれた部分に表示方法を記載します。

参考サイト様

プラグイン以外のカスタマイズ

タクソノミーの説明文の追加

defom-download06

実際のページで確認:http://defcon.movillust-kaido.com/genre/movie/

こんな感じで説明文を挿入しています。各種タクソノミー毎に説明文を入れることで、内容のわかりやすさ、利用規約へのスムーズなリンクを実現しています。

ブログではカテゴリーページが自動生成され、サービスやテーマ・テンプレートで表示方法は異なるものの、基本的に同カテゴリーの記事一覧が出力されます。 今までカテゴリーページにさほど気を使っていなかったのですが、記事数が増え、 …

上記サイト様の方法を再現しただけです。
同じ方法でタクソノミーにも説明文の挿入が可能になります。

前後記事の表示

defom-download07

前後に投稿した記事があった方がわかりやすいと判断して導入しています。通常の記事ページでも同じく導入を行っています。

画像のように前の記事と次の記事のナビゲーションにサムネイル画像を表示する方法のご紹介です。最新の記事と最古の記事には【ホームへ戻る】のボタンを設置しています。少しでもサイトを訪れて ... more

上記のサイト様の内容を参考にCSSと一部内容を調整して表示しています。

まとめ

DeFoMダウンロードページ制作情報とXeory Extensionのカスタマイズ情報でした。
今回はカスタマイズ記事の第一弾になります。

Xeory Extensionは非常にいじりがいのある面白いテーマなので、全3~4回程度の構想で記事を書いております。近日中に第二回目の記事を書かせて頂きますのでよろしくお願いします!

改めてですが、この記事の主役である2つのサイトを紹介させて頂きます。

wordpress無料テーマXeory Extension配布元様:Xeory-無料WordPressテーマ-
梅津真琴さんの動画制作サイト:DeFoM

それでは、本日は失礼します!

【Xeory Extension】DeFoMダウンロードページ制作情報
この記事をお届けした
O3 WEBの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク