PR

【WordPressテーマ：Lightning】のカスタマイズ例

2018/10/02

Wordpress Lightningテーマイメージ

ご訪問いただき有難うございます。

今回は、WordPress無料テーマ「Lightning」のご紹介と公式サイトに掲載されていないカスタマイズ例を掲載いたします。

WordPressテーマ「Lightning」ってどんなテーマ？

仕様に関して制約は無いのか？

無料＆商用利用可の100％GPLライセンスのWordpressテーマなのでどんな方でも利用いただけるようです。

日本企業の株式会社ベクトルさんが提供しているSEO対策済のWordPressテーマ「Lightning」を使用した際にCSSやテンプレートphpをカスタマイズした際の方法をまとめています。

カスタマイズは簡単に出来るのか？

「テーマはシンプルな構成でカスタマイズしやすく、機能は同時開発の多機能プラグインで強力に拡張。今時のビジネスサイトやブログを作る上で必要な機能を網羅。」と公式アナウンスが出ています。

この記事で提供しているカスタマイズ例

この記事では、Lightning公式サイトに掲載されていない、テンプレートのカスタマイズ方法を記載しています。但し、カスタマイズ実装時にデザインが崩れてしまう可能性も有りますので、十分に注意して実装する事をおすすめします。

スポンサードサーチ

Lightning6.1.2のテンプレートカスタマイズ例

投稿・固定ページのウィジェットの新着記事＆アーカイブを非表示にする

Lightning6.1.2はデフォルトで投稿ページと固定ページの左右のメニュー最上部に自動で表示される新着記事＆アーカイブが自動で表示されるのですが、関連記事のプラグインなどを導入した際に同じような記事がメニューに表示されてメニュー部分が縦長になりすぎてしまった際に、新着記事＆アーカイブ表示をテンプレートを変更する事で非表示にする方法をご紹介します。

記載日：2018/10/2

対象テンプレート名：sidebar-post.php

テンプレート内の以下の箇所を探してください。

<aside class="widget">
<h1 class="subSection-title"><?php echo __('Recent posts', 'lightning');?></h1>
<?php while ( $post_loop->have_posts() ) : $post_loop->the_post();?>

  <div class="media">

    <?php if ( has_post_thumbnail()) :?>

      <div class="media-left postList_thumbnail">
        <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail('thumbnail'); ?>
        </a>
      </div>

    <?php endif; ?>

    <div class="media-body">
      <h4 class="media-heading"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
      <div class="published entry-meta_items"><?php echo get_the_date(); ?></div>          
    </div>
  </div>

<?php endwhile;?>
</aside>
<?php endif; ?>
<?php wp_reset_query(); ?>
  
<aside class="widget widget_categories widget_link_list">
<nav class="localNav">
<h1 class="subSection-title"><?php _e('Category', 'lightning');?></h1>
<ul>
  <?php wp_list_categories('title_li='); ?> 
</ul>
</nav>
</aside>

<aside class="widget widget_archive widget_link_list">
<nav class="localNav">
<h1 class="subSection-title"><?php _e('Archive', 'lightning');?></h1>
<ul>
  <?php
  $args = array(
    'type' => 'monthly',
    'post_type' => 'post',
    );
  wp_get_archives($args); ?>
</ul>
</nav>
</aside>

Lightning2.7.6同様に上記個所を以下の様に全てコメントアウトする事で非表示にする事ができます。

<!-- 非表示開始
<aside class="widget">
<h1 class="subSection-title"><?php echo __('Recent posts', 'lightning');?></h1>
<?php while ( $post_loop->have_posts() ) : $post_loop->the_post();?>

  <div class="media">

    <?php if ( has_post_thumbnail()) :?>

      <div class="media-left postList_thumbnail">
        <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail('thumbnail'); ?>
        </a>
      </div>

    <?php endif; ?>

    <div class="media-body">
      <h4 class="media-heading"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
      <div class="published entry-meta_items"><?php echo get_the_date(); ?></div>          
    </div>
  </div>

<?php endwhile;?>
</aside>
<?php endif; ?>
<?php wp_reset_query(); ?>
  
<aside class="widget widget_categories widget_link_list">
<nav class="localNav">
<h1 class="subSection-title"><?php _e('Category', 'lightning');?></h1>
<ul>
  <?php wp_list_categories('title_li='); ?> 
</ul>
</nav>
</aside>

<aside class="widget widget_archive widget_link_list">
<nav class="localNav">
<h1 class="subSection-title"><?php _e('Archive', 'lightning');?></h1>
<ul>
  <?php
  $args = array(
    'type' => 'monthly',
    'post_type' => 'post',
    );
  wp_get_archives($args); ?>
</ul>
</nav>
</aside>
非表示終了 --!>

ファイル更新後、非表示になっている事が確認できれば完了です。

個別でウィジェット追加を行っていないと、投稿ページ・固定ページのサイドバーに何も表示されないので、好みのウィジェットを追加しておきましょう。

ページにカスタムフィールドetcを活用して任意の画像を表示させる

Lightning6.1.2では、投稿ページに画像を掲載する際は一つ一つ本文に画像挿入をして掲載していくのですが、記事数がある程度増えていった際に過去記事に同一の画像を記事本文前後に掲載したいと思った時に、一つ一つ編集画面を開いて本文に画像挿入していくのは、多くのリソースを費やしてしまいます。

そういった時にこのカスタマイズ方法を活用すると、一回の処理で全ての投稿ページに同一画像を表示させることができます。

記載日：2018/10/2

対象テンプレート名：module_loop_post.php

テンプレート内の以下の箇所を探してください。

<h1 class="media-heading entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

上記はリスト内のタイトルを出力するコードですが、この下にカスタムフィールド値や特定の画像URLを記載する事でリスト内で投稿記事別のオリジナル画像を表示させる事ができます。

Lightning2.7.6同様に以下の例の様にコードを記述します。

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="http://**.jpg" alt="<?php the_title(); ?>" /></a>

正常に画像が表示されているかを確認して問題無ければ完了です。

フッターのコピーライト「Powered by WordPress & Lightning Theme by Vektor,Inc. technology.」を非表示にする

Lightningフッターイメージ

Lightning6.1.2のフッターには自動で「Powered by WordPress & Lightning Theme by Vektor,Inc. technology.」が掲載されるのですが、このカスタマイズ方法で非表示にできる可能性があります。Lightningの公式サイト側は問題無いようですので、どうしても「Powered by WordPress & Lightning Theme by Vektor,Inc. technology.」を非表示にしたい方は試してみてください。

記載日：2018/10/2

対象テンプレート名：Lightning: footer.php

以下のコードを確認します。

<!--<?php lightning_the_footerCopyRight(); ?>--!>

上記コードを以下の様に変更します。

<p>Copyright &copy; <?php bloginfo( ‘name’ ); ?> All Rights Reserved.</p>

ファイルを更新を押して、「Powered by WordPress & Lightning Theme by Vektor,Inc. technology.」が削除されているのを確認すれば完了です。

Lightning2.7.6のテンプレートカスタマイズ例

投稿ページのウィジェットの新着記事＆アーカイブを非表示にする

Lightning2.7.6はデフォルトで投稿ページと固定ページの左右のメニュー最上部に自動で表示される新着記事＆アーカイブが自動で表示されるのですが、関連記事のプラグインなどを導入した際に同じような記事がメニューに表示されてメニュー部分が縦長になりすぎてしまった際に、新着記事＆アーカイブ表示をテンプレートを変更する事で非表示にする方法をご紹介します。

記載日：2017/5/29

対象テンプレート名：sidebar-post.php

テンプレート内の以下の箇所を探してください。

<aside class="widget">
<h4 class="subSection-title"><?php echo __('Recent posts', 'lightning');?></h4>
<?php while ( $post_loop->have_posts() ) : $post_loop->the_post();?>
  <div class="media">
    <?php if ( has_post_thumbnail()) :?>
      <div class="media-left postList_thumbnail">
        <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail('thumbnail'); ?>
        </a>
      </div>
    <?php endif; ?>
    <div class="media-body">
      <h4 class="media-heading"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
      <div class="published entry-meta_items"><?php echo get_the_date(); ?></div>          
    </div>
  </div>
<?php endwhile;?>
</aside>
<?php endif; ?>
<?php wp_reset_query(); ?>
<aside class="widget widget_categories widget_link_list">
<nav class="localNav">
<h1 class="subSection-title"><?php _e('Category', 'lightning');?></h1>
<ul>
  <?php wp_list_categories('title_li='); ?> 
</ul>
</nav>
</aside>
<aside class="widget widget_archive widget_link_list">
<nav class="localNav">
<h1 class="subSection-title"><?php _e('Archive', 'lightning');?></h1>
<ul>
  <?php
  $args = array(
    'type' => 'monthly',
    'post_type' => 'post',
    );
  wp_get_archives($args); ?>
</ul>
</nav>
</aside>

上記は、投稿記事ページのウィジェット管理で設定したウィジェットの下にデフォルトで表示されます。

上記個所を以下の様に全てコメントアウトする事で非表示にする事ができます。※削除してもOKなのですが、今回は以下の様にコメントアウトさせます。

<!--
<aside class="widget">
<h4 class="subSection-title"><?php echo __('Recent posts', 'lightning');?></h4>
<?php while ( $post_loop->have_posts() ) : $post_loop->the_post();?>
  <div class="media">
    <?php if ( has_post_thumbnail()) :?>
      <div class="media-left postList_thumbnail">
        <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail('thumbnail'); ?>
        </a>
      </div>
    <?php endif; ?>
    <div class="media-body">
      <h4 class="media-heading"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
      <div class="published entry-meta_items"><?php echo get_the_date(); ?></div>          
    </div>
  </div>
<?php endwhile;?>
</aside>
<?php endif; ?>
<?php wp_reset_query(); ?>
<aside class="widget widget_categories widget_link_list">
<nav class="localNav">
<h1 class="subSection-title"><?php _e('Category', 'lightning');?></h1>
<ul>
  <?php wp_list_categories('title_li='); ?> 
</ul>
</nav>
</aside>
<aside class="widget widget_archive widget_link_list">
<nav class="localNav">
<h1 class="subSection-title"><?php _e('Archive', 'lightning');?></h1>
<ul>
  <?php
  $args = array(
    'type' => 'monthly',
    'post_type' => 'post',
    );
  wp_get_archives($args); ?>
</ul>
</nav>
</aside>
-- >

ファイル更新後、非表示になっている事が確認できれば完了です。

ページにカスタムフィールドetcを活用して任意の画像を表示させる

Lightning2.7.6では、投稿ページに画像を掲載する際は一つ一つ本文に画像挿入をして掲載していくのですが、記事数がある程度増えていった際に過去記事に同一の画像を記事本文前後に掲載したいと思った時に、一つ一つ編集画面を開いて本文に画像挿入していくのは、多くのリソースを費やしてしまします。

そういった時にこのカスタマイズ方法を活用すると、一回の処理で全ての投稿ページに同一画像を表示させることができます。

記載日：2017/5/29

対象テンプレート名：module_loop_post.php

テンプレート内の以下の箇所を探してください。

<h1 class="media-heading entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

上記はリスト内のタイトルを出力するコードですが、この下にカスタムフィールド値や特定の画像URLを記載する事でリスト内で投稿記事別のオリジナル画像を表示させる事ができます。

以下の例の様にコードを記述します。

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
	<img src="http://**.jpg" alt="<?php the_title(); ?>" />
</a>

正常に画像が表示されているかを確認して問題無ければ完了です。

フッターのコピーライト「Powered by WordPress & Lightning Theme by Vektor,Inc. technology.」を非表示にする

Lightningフッターイメージ

Lightning2.7.6のフッターには自動で「Powered by WordPress & Lightning Theme by Vektor,Inc. technology.」が掲載されるのですが、このカスタマイズ方法で非表示にできる可能性があります。Lightningの公式サイト側は問題無いようですので、どうしても「Powered by WordPress & Lightning Theme by Vektor,Inc. technology.」を非表示にしたい方は試してみてください。

記載日：2017/5/29

対象テンプレート名：Lightning: functions_helpers.php

以下のコードを確認します。

// Powered
	/*------------------*/
	$lightning_footerPowered = __( '<p>Powered by <a href="https://wordpress.org/">WordPress</a> &amp; <a href="//lightning.bizvektor.com" target="_blank" title="Free WordPress Theme Lightning"> Lightning Theme</a> by Vektor,Inc. technology.</p>', 'lightning');
	echo apply_filters( 'lightning_footerPoweredCustom', $lightning_footerPowered );

}

上記のコメントアウト部分「/*——————*/」の終了タグの位置をずらして以下の様に変更します

// Powered
	/*------------------
	$lightning_footerPowered = __( '<p>Powered by <a href="https://wordpress.org/">WordPress</a> &amp; <a href="//lightning.bizvektor.com" target="_blank" title="Free WordPress Theme Lightning"> Lightning Theme</a> by Vektor,Inc. technology.</p>', 'lightning');
	echo apply_filters( 'lightning_footerPoweredCustom', $lightning_footerPowered );*/

}

変更内容を保存後、ページを確認して非表示になっていれば完了です！

WordPress Popular Postsでサイドバーに設置したウィジェットの左側の無駄な余白を削除して左寄せにする方法

Lightningのウィジェットを右に表示して、関連商品を掲載するプラグイン「WordPress Popular Posts」でウィジェットに関連商品ランキングを表示した際に左側に無駄な余白ができてしまうバグが発生する場合があるのですが、その際の解決方法を掲載しています。もしこのようなバグが発生してた際は、お試しください。

記載日：2017/5/28

対象テンプレート：wordpress-popular-posts/style/wpp.css

プラグイン＞編集＞WordPress Popular Postsを選択＞wordpress-popular-posts/style/wpp.cssを開いて以下のコードを確認します

.wpp-list {	
}

上記のコードに以下のスタイルを追加します

.wpp-list {	
	padding-left:5px;
}

変更を保存して、きちんと左寄せになっているか確認すれば完了です！

最後までお読みいただきありがとうございます。

これからも、新しい公式テーマサイトに掲載されていなさそうな、新しいカスタマイズ方法があった際は、更新していきますので宜しくお願いいたします。

スポンサードサーチ

WordPressの最強有料テーマ

WordPressユーザーの殆どの人は無料テーマで日々四苦八苦しています。皆より一歩先を進むために有料テーマを検討してみるのはいかがでしょうか？きっと差がつくはず！

徹底的なSEO対策と洗練されたデザインのWordPressサイトがワンクリックで完成するテーマ「THE THOR」

上位表示が狙えるTHE THOR公式はこちら

ロングセラーで信頼されたWordPressテーマ「賢威」

賢威公式サイトはこちら

タイトルとURLをコピーしました