LoginSignup
2
4

More than 5 years have passed since last update.

BizVektor Lightning

Posted at
1 / 23

 新機能紹介


新機能 1

固定ページ
Landing Page
テンプレート


使い方

固定ページ編集画面右側の
ページ属性 → テンプレート の
プルダウンで「Landing Page」を選択

特徴

  • 通常の固定ページと違って上部にタイトルとパンくずリストが入らない。
  • Landing Page に設定した固定ページ専用のウィジェットエリアが利用出来るようになります。

用途

特殊な商品情報やイベント情報などのキャンペンページを作るためのテンプレート

利用例

注意点

Lightningの場合 本文欄に何か入ってないとお問い合わせボタンとか表示できない。


新機能 2

Custom Post Type Manager


Custom Post Type Manager ?

WordPress標準では「投稿」と「固定ページ」の2系統だけ(BizVektorの場合は「お知らせ(nfo)」を入れた3系統)だけだが、この系統を管理画面から自由に追加する機能


BizVektorでの有効化の仕方

子テーマの functions.phpなどに

get_template_part('plugins/post-type-manager-config');

Lightningでの有効化の仕方

  1. プラグイン VK All in One Expansion Unit をインストール
  2. 管理画面 → VK ExUnit で Post Type Manager を有効化

カスタム投稿タイプを作成

  1. 管理画面左側のメニューの「カスタム投稿タイプ設定」をクリック
  2. 新規追加

※ パーマリンク設定を必ず保存する


カスタム分類を作成

カスタム分類とは

投稿でいう所のカテゴリーに該当する部分

■ カスタム分類名(スラッグ)

識別用のIDになります。半角英数字で入力

■ カスタム分類名

「カテゴリー」など、実際にウェブサイトに表示される名称


ウィジェットをセットする

投稿タイプを追加すると、その投稿タイプ用のサイドバーのウィジェットエリアが自動的に表示されます(BizVektorは 1.9以降)。

カスタム分類ウィジェットやアーカイブウィジェットを使用して、投稿タイプにあった項目を表示しましょう。


カスタマイズ


子テーマでのカスタマイズ

テーマをカスタマイズする時は必ず子テーマでカスタマイズするようにしてください。

BizVektorの子テーマ
https://bizvektor.com/setting/customize/

Lightningの子テーマサンプル
http://lightning.vektor-inc.co.jp/ja/setting/customize/child_theme


子テーマのメリット

親テーマでカスタマイズしたいファイルを複製して子テーマのディレクトリに配置しすれば親テーマで更新が入っても上書きされる事はありません。


投稿タイプ用のテンプレートの作成

■ 詳細ページ
single-★投稿タイプ名★.php

■ アーカイブページでの1件分
module_loop_★投稿タイプ名★.php


カスタムフィールドを使う

■カスタムフィールドを簡単に作るプラグイン
https://ja.wordpress.org/plugins/smart-custom-fields/

■簡単なフィールドの値の呼び出し方

$post->フィールド名


■注意

エスケープ処理をしてください。

<?php echo esc_html( $post->フィールド名 ); ?>


詳細ページでの利用例

<p><?php echo wp_get_attachment_image( $post->item_image,'large'); ?></p>
<table>
<tr>
<th>価格</th>
<td><?php echo esc_html($post->item_price); ?>円</td>
</tr>
<tr>
<th>品番</th>
<td><?php echo esc_html($post->item_no); ?>円</td>
</tr>
</table>

画像の表示

wp_get_attachment_image() 関数

プラグイン「Smart Custom Field」の場合は画像のID(番号)を保存するので、「$post->フィールド名」を呼び出しても数字しか返ってきません。これをHTMLで表示するには wp_get_attachment_image() 関数を使用します。

<?php echo wp_get_attachment_image( 画像ID,サイズ); ?>

実際の用例は下記のようになります。

<?php echo wp_get_attachment_image( $post->item_image,'medium'); ?>

画像のサイズ

thumbnail : サムネイル
medium : 中
large : 大
full : オリジナルの画像サイズ


ライトニングのデザインスキン作成用サンプルデータ


プラグイン紹介

著者情報表示プラグイン

投稿のリンク先を変更出来る


参考

静的HTMLからWordPressのテーマを作る
https://github.com/wckansai2016/make-wp-theme

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4