2019/09/16
(Updated : 2019/10/11)

【コピペでOK】「Minimal」初期設定と落とし穴！コードを上手く編集してスマートに管理しよう【WordPressテーマ】

テク・プログラミング

こんにちは、ガタガタです。

マナブさん開発のWordpressテーマ「Minimal」を使用されている方が増えてきました。私も現在Minimalを使用しているので、とても喜ばしいです。

ただその仕様上、コードに不慣れな人にはカスタマイズが難しいため、デフォルトのまま使用されている方がいたり、開発者でもない私のもとにカスタマイズの問い合わせメールが届いたりと、使いこなすのに苦戦する方が多い印象を受けます。

そこでこの記事では、Minimalを購入したらまず最低限行うべき設定を紹介いたします。この記事に書いてあることを行えば、とりあえず自分のブログらしくなります。コピペOKですので、どうぞご活用ください。

※Minimalセットに同梱された３つのテーマのうち、最もプレーンな「Minimal」をベースに解説しています。他のテーマをご使用の方は適宜読み替えて下さい。

作業をする前に

一般的なテーマでは、Wordpressダッシュボードから編集する場合が多いです。しかしMinimalでは余計な機能が極力省かれているため、ダッシュボードからはテーマ編集ができない仕様になっています。

そこで、テキストエディタでphpを編集し、編集したものをサーバーへアップロードすることで、テーマの初期設定を行います。

テキストエディタの入手

メモ帳やワードパッドではコードを編集できないので、まずはコーディング用のテキストエディタを入手してください。無料のものでOKです。
無料テキストエディタ「Atom」

phpやcssは、必ずコード編集用のテキストエディタで開きましょう。

バックアップをとる

購入したMinimalを編集する前に、フォルダごとコピーを取り、万が一バグって修正できなくなったときに復旧できるようにしておきましょう。

何か大きな変更を加えるときは、その都度バックアップを取るようにしておきましょう。

著者紹介の編集

サイドバーおよびフッターの２ヵ所に、著者紹介の欄があります。

サイドバーはsidebar.php、フッターはfooter.phpにあたりますので、それぞれを編集します。

サイドバーの編集

sidebar.phpの2行目からが著者紹介です。未編集の場合は次のようになっています。

<div class="col-xs-12 author">
  <img src="http://manabubb.xsrv.jp/simple-strap/wp-content/uploads/2017/01/author.png" class="img-responsive img-circle">
  <h4>John Doe</h4>
  <hr>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

アイコンの設定

imgタグの src=”http://～” のアドレスに使いたいアイコンのパスを入れてください。相対パスを記述するとページによっては表示されなくなる場合があるので、必ず絶対パスを使うようにしましょう。

<!-- 良くない例：相対パスを使っている。表示されなくなる場合がある。 -->
<img src="img/author.png" class="img-responsive img-circle">

<!-- 良い例：絶対パスを使っている。どんな場合でも表示されるはず。 -->
<img src="http://gt-gt.org/wp-content/uploads/2018/07/icon-illust.png" class="img-responsive img-circle">

なお、画像が丸くトリミングされる仕様です。トリミングせずに画像を使いたい場合は末尾の「img-sircle」を削除してください。

<!-- 丸くトリミングしたくない場合 -->
<img src="http://gt-gt.org/wp-content/uploads/2018/07/icon-illust.png" class="img-responsive">

名前と文章の編集

h4タグ内に著者名、pタグ内に著者紹介文を記入したら、サイドバーのプロフィールが完成です。SNSなどを運用していれば、アカウントへのリンクをつなげてもよいですね。

<div class="col-xs-12 author">
  <img src="http://gt-gt.org/wp-content/uploads/2018/07/icon-illust.png" class="img-responsive img-circle">
  <h4>ガタガタ</h4>
  <hr>
  <p>2019.4.6〜プログラミング勉強を始め、同年8月に未経験ながらWeb制作会社に就職したWebデザイナー・コーダーです。ゲーム、映画、漫画、そして科学が大好きな薬学出身者。</p>
</div>

フッターの編集

さてフッターの著者紹介は文章のみなので、pタグごとテキストをコピペして終了です。

……なのですが、どうせ同じ内容にするのなら、一ヶ所だけ編集すればすべてに反映されるように管理した方が楽ですよね。

そこで著者紹介の文章部分だけを書いた共用ファイルをつくり、サイドバーとフッターでそのファイルを呼び出す仕組みにしてみましょう。いわゆる共通パーツ化です。ちょっとコードをいじるので、自信のない方は飛ばしていただいて問題ありません。

発展編：著者紹介の共通パーツ化

まず、author.phpという名前の新規ファイルを、sidebar.phpと同じ階層につくります。

内容は著者紹介の文章部分をコピペでOK。phpファイルなので、リンクなどのタグを使用しても大丈夫です。

<p>2019.4.6〜プログラミング勉強を始め、同年8月に未経験ながらWeb制作会社に就職したWebデザイナー・コーダーです。ゲーム、映画、漫画、そして科学が大好きな薬学出身者。</p>

次に、sidebar.phpとfooter.phpの著者紹介のテキスト部分を、author.phpを呼び出すタグに置き換えます。

sidebar.phpは次のように、

<div class="col-xs-12 author">
  <img src="http://gt-gt.org/wp-content/uploads/2018/07/icon-illust.png" class="img-responsive img-circle">
  <h4>ガタガタ</h4>
  <hr>
  <?php include('author.php'); ?>
</div>

footer.phpは次のようになります。

<div class="col-xs-12 col-sm-4">
  <h4>About me!</h4>
  <hr>
  <div style="clear:both"></div>
  <?php include('author.php'); ?>
</div>

php include……と書かれた一行で、外部ファイルであるauthor.phpの中身を代入しています。

著者紹介を書き換えたくなったら、author.phpを編集するだけで、サイドバーとフッターの二か所に変更が反映されます。これで管理が少しらくちんになりました！

応用すればいろんなパーツを共通化できるはずです。ぜひ模索してみてください。

ナビゲーションバーの設定

nav-menu.phpを編集します。

<ul class="nav navbar-nav">

  <li itemprop="url" class="sp-none"><a href="<?php echo home_url(); ?>/" itemprop="name"><i class="fa fa-home" aria-hidden="true"></i></a></li>
  
  <!-- プルダウン式のナビメニュー -->
  <li class="dropdown" itemprop="url">
    <a href="#" itemprop="name" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">プルダウン式のナビメニュー<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="ここにリンク先のアドレス">子メニュー１</a></li>
      <li><a href="ここにリンク先のアドレス">子メニュー２</a></li>
      <li><a href="ここにリンク先のアドレス">子メニュー３</a></li>
    </ul>
  </li>
  <!-- プルダウン式のナビメニュー　おわり -->

  <!-- ナビメニュー   -->
  <li itemprop="url"><a href="ここにリンク先のアドレス" itemprop="name">ナビメニュー</a></li>
  <!-- ナビメニュー　おわり   -->
  
</ul>

クリックすると子メニューが出るプルダウンタイプのボタンと、クリックでリンク先に移動するタイプのボタンが使えます。上のタグをそのままコピペすると、次のような感じになります。

ブログでよく利用しているカテゴリや、重要な固定ページへのリンクを貼るといい感じです。リンクの数に合わせて、コードをコピペしてカスタマイズしましょう。

また、ここでもアドレスを記入する際、必ず相対パスではなく絶対パスを使いましょう。相対パスだと、ページによってはリンク切れになってしまいます。

<!-- 良くない例 -->
<li itemprop="url"><a href="cat/money/" itemprop="name">お金のこと</a></li>

<!-- 良い例 -->
<li itemprop="url"><a href="http://gt-gt.org/cat/money/" itemprop="name">お金のこと</a></li>

フッターをさらに編集

さきほど著者紹介の項目でも少し触れたフッターですが、他にも編集すべき箇所があります。

ポートフォリオ

もしも紹介したい制作物やリンクがあれば、ぜひ貼りましょう。

<ul class="list-unstyled">
  <li><a href="ここにリンク先のアドレス" target="new" rel="nofollow noopener noreferrer">サイト名</a></li>
  <li><a href="ここにリンク先のアドレス" target="new" rel="nofollow noopener noreferrer">サイト名</a></li>
  <li><a href="ここにリンク先のアドレス" target="new" rel="nofollow noopener noreferrer">サイト名</a></li>
</ul>

特に書きたいことがない場合は、コードをコメントアウトして、非表示にするのも手です。

<!-- <div class="col-xs-12 col-sm-4">
  <h4>Portfolio</h4>
  <hr>
  <div style="clear:both"></div>
  <ul class="list-unstyled">
    <li><a href="https://google.com/" target="new" rel="nofollow noopener noreferrer">Google</a></li>
    <li><a href="https://www.yahoo.com/" target="new" rel="nofollow noopener noreferrer">Yahoo</a></li>
    <li><a href="" target="new" rel="nofollow noopener noreferrer">Minimal Life</a></li>
  </ul>
</div> -->

<!– ここにコメント –>のように記述することで、ブラウザでは表示されないコメントを書き残すことができます。これでフッターの中央のカラムが消えるはずです。

twitter埋め込み

次のURLの手順に従い、埋め込み用のコードを作ります。
Twitter Publish

テキストボックスに自分のタイムラインのURLを入力します。

Embed Timelineを選択。

次に、埋め込みのサイズを設定します。

この画面で埋め込みのサイズやリンクの色などを設定します。

Minimalはレスポンシブデザインといって、サイトを表示している画面の横幅に応じて、コンテンツの大きさも変わる仕組みが採用されています。スマホとパソコンでは、画面の大きさが全く違いますが、Minimalのレイアウトがどちらの画面でも崩れないのは、レスポンシブデザインのおかげです。

twitterの埋め込みをレスポンシブにするには、width（横幅）を空欄にして埋め込みコードを作ればOKです。これで画面の横幅に合わせて、twitter埋め込みの幅もいい感じに変化します。height（縦幅）はお好みでいいでしょう。

生成したコードを、フッターの該当箇所にコピペします。

<div class="col-xs-12 col-sm-4">
  <h4>Twitter</h4>
  <hr class="twitter">
  <div style="clear:both"></div>
  <a class="twitter-timeline" data-lang="ja" data-height="400" href="https://twitter.com/gt_gt_gl?ref_src=twsrc%5Etfw">Tweets by gt_gt_gl</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

コピーライト

ページ最下部のコピーライトを編集して、最低限必要な設定は終わりです。

<div class="container-fluid credit">
  <div class="row">
    <p class="col-xs-12 text-center">Copyright - <a href="https://manablog.org/">Your Name</a>, （2019等、ブログを始めた年） All Rights Reserved.</p>
  </div>
</div>