【初心者向け】WordPress テーマlightningのカスタマイズ方法

WordPress テーマlightningでブログを立ち上げた初心者のかたは、こちらの本を参考にされたかたも少なくないのでは？

いちばんやさしいWordPressの教本

わたしもそのうちのひとりです。

無事にlightningでサイトはできたのだけれど、見た目をもっとカッコよくしたい。

そう思っていろいろなサイトや書籍を参考に、いくつかカスタマイズしました。

その方法を、順番にご紹介したいと思います。

はじめに
1. Lightningの子テーマをインストールする
アイキャッチの画像のサイズを大きくする
投稿をグリッド表示
投稿一覧の表示をシンプルに
1. 投稿日とカテゴリーを非表示に
2. 抜粋文を表示させない
投稿画面のサイドバーをカスタマイズ
ヘッダーのロゴとメニューを中央揃えにする
フッターのコピーライト表示をカスタマイズ
1. 子テーマにfooter.phpを配置する
2. footer.phpを修正する
お悩み相談室
1. WordPressが遅いと感じたら

はじめに

Lightningの子テーマをインストールする

親テーマを直接さわってしまうと、テーマを更新した際、追加や修正したところが元に戻ってしまいます。
カスタマイズは子テーマで行いましょう。

lightning子テーマの導入方法は、lightningの公式ページで確認できます。

WordPress テーマ lightning 公式ウェブ

アイキャッチの画像のサイズを大きくする

初期設定では、サムネイル画像サイズが小さい

サムネイルのサイズを変更

ダッシュボード/設定/メディア　を開き、アップロードする画像のサイズを変更します。

サイズを変更したら、ページ左下にある、「変更を保存」をクリック。
これで、これからアップロードする画像のサイズが大きくなります。

すでにアップロードされているファイルのサイズは変更されないので、ファイルをアップロードしなおすか、プラグイン「Regenerate Thumbnails」でサムネイルを再作成しましょう。

Regenerate Thumbnails をインストール、有効化する

ダッシュボード/外観/プラグイン/新規追加で、Regenerate Thumbnailsを検索し、「今すぐインストール」を押します。

数秒するとインストールが完了し、「今すぐインストール」の表示が「有効化」に変わります。
「有効化」を押しましょう。

サムネイルを再作成する

ツールからRegenerate Thumbnailsを選択します。

「Regenerate Thumbnails For All ●●● Attachments」ボタンを押します。

プログレスバーが表示されるので、処理が終わるので待ちます。

完了しました。

アイキャッチ画像の大きさが記事幅になるようにする

ダッシュボード/外観/カスタマイズ/追加CSS　を開きます。
子テーマが選択されていることを確認してくださいね。

コードを追加します。

追加コード：

.media .postList_thumbnail{
    width: 100%!important;
    padding-right:0px!important;
}

画面左上の「公開」ボタンを押します。
これでアイキャッチ画像のサイズが大きくなりました。

投稿をグリッド表示

さて、アイキャッチ画像のサイズは大きく表示されました。
スマホでならこれで良いのですが、パソコンなど大きな画面で表示すると、少し大きすぎる印象です。

そこでグリッド表示（2列表示）にしたいと思います。

先ほどと同様、ダッシュボード/外観/カスタマイズ/追加CSS　を開き、コードを追加します。

追加コードは、


/* 投稿記事を2列に */
#main .postList,
.home .mainSection .postList {
    display: flex;
    width: 100%;
    flex-wrap:wrap;
}

#main .media,
.home .media {
    padding: 1%;
 &nbsp; &nbsp;margin: 1% 1% 10px;
    border: solid 1px #eee;
}

@media (max-width: 480px) {
    #main .media,
    .home .media {
        width: 100%;
    }
}

@media (min-width: 481px) {
    #main .media,
    .home .media {
        width: 48%;
    }
}

@media (min-width: 481px) {
    #main .media,
 &nbsp; &nbsp;.blog .media {
     width: 48%;
    }
}

画面左上の「公開」ボタンを押します。
グリッド表示（2列）に表示されました。

投稿一覧の表示をシンプルに

投稿日とカテゴリーを非表示に

投稿一覧はスッキリさせたい。
ということで、赤枠の投稿日とカテゴリーを非表示にします。

先ほどと同様、ダッシュボード/外観/カスタマイズ/追加CSS　を開き、コードを追加します。

追加コード：


.archive .entry-meta_items_term,
.blog .entry-meta_items_term,
.home .entry-meta {
    display:none;
}

画面左上の「公開」ボタンを押します。
メタデータが非表示になりました。

抜粋文を表示させない

続いて、赤枠の抜粋分を非表示にします。

プラグイン「WP Multibyte Patch」をインストール＆有効化

まず、プラグイン「WP Multibyte Patch」をインストール＆有効化してください。

function.phpにコードを追加

外観/テーマエディターを開き、画面右側の「テーマのための関数 (functions.php)」を選択します。
編集するテーマが、子テーマであることを確認してください。

function.phpにコードを追加します。
追加コード：


// 抜粋欄に入力がない時は抜粋文を表示させない
function my_excerpt_mblength($length) {
    return 0;
}
add_filter('excerpt_mblength', 'my_excerpt_mblength');
function my_excerpt_more($post) {
    return '';
}
add_filter('excerpt_more', 'my_excerpt_more');

画面左下の「ファイルを更新」ボタンを押します。

抜粋文が表示されなくなりました。

投稿画面のサイドバーをカスタマイズ

デフォルトでは、「最新記事リスト」「カテゴリーリスト」「月間アーカイブリスト」が表示されています。

この設定を変更するには、ダッシュボード/外観/ウィジェットを開きます。
今回はカテゴリーのみを表示したいと思います。

画面左側の「利用できるウィジェット」の「カテゴリー」を、画面右側「サイドバー（投稿）」に、ドラッグ＆ドロップします。

タイトルを指定し、保存ボタンを押します。

これで設定は完了です。
カテゴリーのみの表示になりました。

ヘッダーのロゴとメニューを中央揃えにする

初期設定では、ロゴが左に、メニューが右に表示されています。
これを中央揃えにします。

ダッシュボード/外観/カスタマイズ/追加CSS　を開き、コードを追加します。

追加コード：


/* ロゴとメニューを中央揃えに */
@media (min-width: 992px) {

    .container.siteHeadContainer {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .navbar-header {
        width: 100%;
        order: 0;
        float: none;
    }

    .siteHeader_logo {
        float: none;
        width: 100%;

    }

    .siteHeader_logo img {
        margin: 0 auto;
    }

    .gMenu_outer {
        width: 100%;
        order: 1;
        float: none;
    }

    ul.gMenu {
        float: none;
        display: flex;
        justify-content: center;
    }
}

画面左上の「公開」ボタンを押します。
ヘッダーのロゴと、メニューが中央揃えになりました。

フッターのコピーライト表示をカスタマイズ

子テーマにfooter.phpを配置する

本記事の冒頭で紹介した方法で子テーマをインストールしたばあい、
デフォルトでは、子テーマにfooter.phpが存在しません。

FTPソフトでサーバーにアクセスし、親テーマのfooter.phpを自身のパソコンにコピー。
コピーしたfooter.phpを、サーバーの子テーマに配置しましょう。

FTPソフトのインストール、基本的な使い方、そしてWordPressのテーマフォルダーの見つけかたは、サルカワさんのサイトを参考にしてみてください。

WordPressでFTPソフトを使おう @ サルカワ

FTPソフトでサーバーにログインできたら、
www/wp-content/theme/lightning　と進んでいきます。

ここにfooter.phpがあるので、自分のパソコンにダウンロード。
次に、自分のパソコンにダウンロードしたfooter.phpを、www/wp-content/theme/lightning_child にアップロードします。

footer.phpを修正する

外観/テーマエディターを開き、画面右側の「テーマフッタ (footer.php)」を選択します。

赤枠の一文を変更します。
変更コード：


<P>@ Copyright 2020 <?php bloginfo('name'); ?> All Right Reserved.</P>

画面左下の「ファイルを更新」ボタンを押します。
フッターの表示が変わりました。

お悩み相談室

WordPressが遅いと感じたら

WordPressでブログをはじめたのはいいけれど、管理画面もサイトの表示も、速度が遅すぎて困っている場合、サーバーを乗り換えれば、即解決するかもしれません。

わたしは、サーバーを乗り換えたことで、サイト表示速度の問題がビックリするくらい簡単に解決してしまいました。

サーバー乗り換え前は、クリックしてからページが表示されるまで、4～5秒ほどかかりました。

表示されるのを待つ間に、英単語３つぐらい暗記できるのでは？

ぐらいの体感でした。

それからネットなどでいろいろ調べて、サイトの速度を上げるプラグインを入れたり、2週間
ほど試行錯誤したのですが、まったく解決せず。

Page Speed Insight で計測してみても、そこまで悪い結果ではなく、そもそも記事数も10ほどで、重い画像もアップしていませんでした。

そこで一念発起、サーバーを移行することに。

乗り換えたサーバーはmixhostです。

mixhost

サーバーを変えたことで、こんなにも速度が変わるのか、ということを体感し、サーバー選びはとても大切だと思いました。

サイトの速度がどうしても改善しないばあい、サーバーの乗り換えで、わたしのように簡単に解決してしまうかもです。

wordpressの速度が遅くて困っているかたは参考になるかもです