エド・ ニコフ博士

ワードプレスのみでテーマMinimal初期設定【FTP無し】

どうも、あけましておめでとうございます。博士です。

博士はこのホームページをワードプレスで作成したのですが、 ワードプレスのテーマは今回はオリジナルではなく、「manablog」というサイトの「Minimal」というテーマを使って作成しました。

WordPress theme ワードプレステーマ 「Minimal」

「Minimal」はHTML構造、SEO対策、ブログとしての導線がしっかりしているので、 凄く満足はしているのですが、初期設定の方法が他のテーマと比べてかなり厄介だったんですよねー(笑)

いつもはこのタイミングで「博士は面倒なのはキライだからヤメるー」となるんですが、自由研究レポートのネタもそろそろ無くなってきた頃ですし(開始1記事目)

ここにログを残しておきますのでワードプレステーマ「Minimal」を使おうと思っている方は参考にして欲しいですぞー!!

あっ因みにこのレポートでは ワードプレス側の画面のみで設定する方法を紹介したいと思っています。 (FTPソフトを使わずにしたい方もいると思いました)

ローカルでPHPファイルを編集してから、FTPソフトを使ってサーバーにアクセスしてアップロードするパターンの設定方法は以下の方たちが紹介しているらしいので紹介しておきます。

※設定方法の参考記事
【ミニマリスト向けのシンプルなテーマ】Minimalの編集方法
WordPress有料テーマ「Minimal」を購入・カスタマイズして分かったこと

Minimalの導入方法

まずは導入から、この時もFTPソフトを使わずにワードプレス側で設定する方法があるので書いておきますねー

注意点として、Minimalを購入した段階では、ZIPファイルではないのでまずZIPファイルにしましょう。

Minimalをzipフォルダにする

自分の使いたいMinimalのファイルを右クリックして「送る > 圧縮(zip形式フォルダ)」を選んでzipフォルダを作成します。

Minimalのアップロード

WordPressの左側のメニューから「外観 > テーマ > 新規追加 > テーマの追加のテーマアップロード」を押して、 ZIP 形式のテーマファイル を入れれば「Minimal」テーマの導入が完了します。

※zipファイルでないとアップロードできないので注意!!

後はテーマの有効化ボタンを押して「Minimal」テーマの導入は完成です。

Minimal の初期設定を始める

よしっ!きちんとテーマを導入出来たらいよいよ初期設定を開始していきますぞ!今回博士が行う初期設定は主に以下の通りです。

  • ロゴを入れる
  • ナビゲーションメニューを作成
  • サイドバーを作成する
  • フッターを作成する
  • コピーライトを変更
  • その他の変更・追加

この中で自分が行いたい初期設定があればその部分を見ていただければ、しっかりできると思いますので参考にしてくれれば博士は喜びます(感激)

ロゴを入れる

まずはロゴを入れましょう!テーマを導入したばかりだとサイトタイトルの部分にご自身が入力したタイトルの文字がそのまま表示されているかと思います。

せっかくワードプレスを使っていまからブログを運営していこうというのにこれじゃあかっこがつかないですよね?

博士はかっこつけなのでロゴを画像にしようと思います。

ワードプレスのメニューから「外観 > テーマの編集」の中で右側にあるテーマファイルの中から「テーマヘッダー(header.php)」を選びます。その中から以下の記述を確認します。(57行目~65行目あたりにあると思います。)

<div class="col-xs-12 col-sm-12 title">
  <?php if (is_front_page()) { ?>
  <h1 class="title">
  <?php } ?>
  <a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>
  <?php if (is_front_page()) { ?>
  </h1>
  <?php } ?>
</div>

この記述を以下のように変更します。コード部分はホシタニさんを参考にさせてもらい、少し改良したものです!

<!-- ロゴを画像に変更 -->
<div class="col-xs-12 col-sm-12 title">
 <?php if (is_front_page()) { ?>
 <h1 class="title">
 <?php } ?>
 <?php if ( is_mobile() ) : ?>
 <a href="<?php echo home_url(); ?>"><img src='ここにスマホ用のロゴ画像のURL' alt="ロゴ" class="logo-sp" /></a>
 <?php else: ?>
 <a href="<?php echo home_url(); ?>"><img src='ここにPC用のロゴ画像のURL' alt="ロゴ" class="logo" /></a>
 <?php endif; ?>
 <?php if (is_front_page()) { ?>
 </h1>
 <?php } ?>
</div>

画用URLはFTPでアップロードしても良いのですが、今回はワードプレスの中だけで完結したいので画像をアップロードしたいと思います。

ワードプレスのサイドから「メディア > 新規追加」をクリックして画像をアップロードします。

アップロードが完了したら、「メディア > ライブラリ」でご自身がロゴに使いたい画像を選択して、URLと書いてある部分のurlをまるっとコピーしちゃいます!

最後に先ほど変更したコードの「ここにスマホ用のロゴ画像のURL」と「ここにPC用のロゴ画像のURL」の部分をコピーした画像URLに置き換えればとりあえず完成です!実際に見てみましょう!

なんじゃこりゃ!?!?あまりにもロゴが大きすぎてダサいぞ!スマホ版はどうなってる・・・???(恐る恐る)

なんじゃあこりゃあああああ!?!?!?×100!!!背景が黒いのと合わさって「秘密結社」の部分が見えない!これじゃあ本当に秘密にしてるみたいじゃないですか!!!

更に、よく見るとロゴの位置もメニューとかぶってるし、控えめに言ってやばいぞ(驚愕)

ロゴのスタイルを修正する

よし!今すぐ治そう、そうしよう。まずはパソコン版のあまりにも大きいロゴをほどほどのサイズ感になるようにCSSを調整します。

「外観 > テーマの編集」の右側にあるCSS▶の中のstyle.cssをクリックしてその中に以下のような記述があります。(右側最初のスタイルシート(style.css)の方ではないので注意ですぞ!よく探してください!)

見つけたらシートの中を確認してください。以下のような記述が序盤にあるはずです。

@charset "UTF-8";
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

こんな感じでcssの設定が書かれている部分があるはずですぞ!この記述の後に以下のコードをコピペして張り付けてください!

/*PC版ロゴのスタイル*/
.logo{
    max-width: 300px;
}

上記のコードの解説をすると、[.logo]がpc版ロゴ画像の事でその中に書いてあるmax-width が横幅の指定になります。

今回シシトウ団のロゴは横幅が300pxになるように設定しました。皆様のロゴのサイズに合わせて「300px」の数値をお好みで「〇〇〇px」に設定してください。設定が終わったら保存してロゴ画像を確認しに行きましょう!

記事ページを確認してもロゴのサイズが同じになっていますね。成功ですぞ!!!!!(うれしい)

次にスマホ版のロゴ画像を調整します。

背景が黒い為、スマホは違う画像にすることにしました。ワードプレスのサイドから「メディア > 新規追加」をクリックして画像をアップロードします。

アップロードが完了したら、「メディア > ライブラリ」でロゴに使いたい画像を選択して、URLと書いてある部分のurlをまるっとコピーしちゃいます!

後は、上記で書いてあるコードの「ここにスマホ用のロゴ画像のURL」の部分を画像urlに変えると・・・

さて、ここからCSSにスタイルを当てていっていい感じに調整したいと思います!

「外観 > テーマの編集」の右側にあるCSS▶の中のstyle.cssをクリックしてその中の5872行目あたりに以下のような記述があります。(右側最初のスタイルシート(style.css)の方ではないので注意ですぞ!よく探してください!)

先ほど追加したPC版ロゴのスタイル部分が終わった後に以下のコードを追加してください。

/*スマホ版ロゴのスタイル*/
.logo-sp{
    width: 160px;
    margin-top: -26px;
    margin-bottom: -20px;
}
  • .logo-spはスマホ版ロゴ画像の事です。
  • displayはいったん置いておきます。気にしなくて大丈夫です。
  • widthは横幅の指定、あなたの画像に合わせた横幅に設定してください。
  • margin-topはマイナス値で画像に合わせて立幅を合わせてください。
  • margin-bottomもマイナス値で調整してもOKです!

ナビゲーションメニューを作成する

次にナビゲーションメニューを作成していきます!ナビゲーションメニューとはロゴのすぐ近くにあるメニュー部分の事で、Minimalを導入してすぐは以下のようになっていると思います。

First nav▼  Second nav here▼  Nav Menu 1  Nav Menu 2

この部分を自分の好きな内容に変えて行きます。ワードプレスサイドメニューの「外観 > テーマの編集」をクリックして右側にあるnav-menu.phpを探してクリックしてください。すると以下のようなコードが9行目あたりで見つかります。

nav-menu.php 9行目あたり

<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"> First nav <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">ALL</a></li>
    <li><a href="#">Hogehoge</a></li>
    <li><a href="#">Next nav</a></li>
  </ul>
</li>
<li class="dropdown" itemprop="url">
  <a href="#" itemprop="name" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Second nav here<span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">ALL</a></li>
    <li><a href="#">Hogehoge</a></li>
    <li><a href="#">Next nav</a></li>
  </ul>
</li>
<li itemprop="url"><a href="#" itemprop="name">Nav Menu 1</a></li>
<li itemprop="url"><a href="#" itemprop="name">Nav Menu 2</a></li>
</ul>

少し難しく感じるかもしれませんが、よく見れば、意外と簡単です。

例えば↑のコードをよく見てFirst nav と書いてあるところをご自身の好きな文字に変えればいいだけです。その他も要領は同じです。

リンクはそれぞれ以下の#の部分を好きなurlに変えれば設定できます。

<a href="#">ALL</a>

博士はシシトウ団用にメニューを以下のように設定しました。(まだメニューが決まってないので途中感がすごい)

<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 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="#">YouTube動画</a></li>
    <li><a href="#">まだ決まっていない</a></li>
  </ul>
</li>
<li itemprop="url"><a href="#" itemprop="name">シシトウ団とは?</a></li>
<li itemprop="url"><a href="#" itemprop="name">お問い合わせ</a></li>
</ul>

ではサイトの方でどう反映されたか見てみましょう!

メニューの内容が決まっていないこと以外は完璧ですね(迫真)

サイドバーを作成する

続いて、サイドバーの作成に移りましょう!「外観 > テーマの編集」からサイドバー(sidebar.php)を探して以下の部分のコードを見つけます。3行目あたりにあるのでわかりやすいです。

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

博士はシシトウ団用に以下のように編集しました。変更したコードを一応書いておきます。

  • httpのurlの画像部分を変える(ロゴの時のように画像urlをいれかえた)
  • h4のJohn Doeを変更
  • pのLorem ipsum dolor~を変更
<img src="https://shishitoudan.com/wp-content/uploads/2019/01/logo.png" class="img-responsive img-circle">
<h4>シシトウ団</h4>
<hr>
<p>ここにサンプル文章が入ります。</p>

サイトのほうではどのように反映されているでしょうか・・・?

こちらも問題ありませんね!完成です!

フッターを作成する

もうちょっとです!頑張りましょう!博士はここまでに4日かかってますけどね(滝汗)

「外観 > テーマの編集」からテーマフッター(footer.php)を探して以下の部分のコードを見つけます。

フッター左部分(About me!)

<div class="col-xs-12 col-sm-4">
  <h4>About me!</h4>
  <hr>
  <div style="clear:both"></div>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

このコードを以下のように博士は変更しました!

<div class="col-xs-12 col-sm-4">
  <h4>おすすめの記事</h4>
  <hr>
  <div style="clear:both"></div>
<a href="ここに記事ページURL" style="color:#337ab7;">» 第1位:ここに記事ページ名</a><br />
<a href="ここに記事ページURL" style="color:#337ab7;">» 第2位:ここに記事ページ名</a><br />
<a href="ここに記事ページURL" style="color:#337ab7;">» 第3位:ここに記事ページ名</a><br />
</div>

pとして入っている文章(Lorem ipsum dolor~volutpat.)を丸々消して、その部分に記事ページのurlとタイトルが自由にいれれるコードを追加しました。実際にページを確認してみましょう!

ちゃんと反映されていますね!自身のお好みの記事をここで紹介する事ができるので嬉しいですね。他にはお問い合わせフォームのページをリンクしたり、色々な使い方が出来そうです。

フッター中部分(Portfolio)

次にフッター中部分です。 テーマフッター(footer.php)の中から以下の部分のコードを見つけます。

<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">Google</a></li>
    <li><a href="https://www.yahoo.com/" target="new" rel="nofollow">Yahoo</a></li>
    <li><a href="" target="new" rel="nofollow">Minimal Life</a></li>
  </ul>
</div>

このコードを以下のように博士は変更しました!

<div class="col-xs-12 col-sm-4">
  <h4>カテゴリー</h4>
  <hr>
  <div style="clear:both"></div>
  <ul class="list-unstyled">
    <li><a href="カテゴリーのURL" target="new">副業カテゴリー</a></li>
    <li><a href="カテゴリーのURL" target="new">副業カテゴリー</a></li>
    <li><a href="カテゴリーのURL" target="new">副業カテゴリー</a></li>
  </ul>
</div>

「ul」の中に入っている「li」の部分を変更してカテゴリーを並べるようにしました!実際に見てみましょう!

カンペキです!最後にフッター右側に移りましょう!

フッター右側 (Twitter)

テーマフッター(footer.php)の中から以下の部分のコードを見つけます。

<div class="col-xs-12 col-sm-4">
  <h4>Twitter</h4>
  <hr class="twitter">
  <div style="clear:both"></div>
  <a class="twitter-timeline"  href="https://twitter.com/manabubannai" data-widget-id="302814657645789185">Tweets by @manabubannai</a>
</div>

博士はこれを以下のように変更しました!

<div class="col-xs-12 col-sm-4">
  <h4>ツイッター</h4>
  <hr class="twitter">
  <div style="clear:both"></div>
<a class="twitter-timeline" href="https://twitter.com/shishitoudan?ref_src=twsrc%5Etfw">Tweets by shishitoudan</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

ツイッターとホームページの連携コードは以下のツイッターパブリッシュから作成したコードを「a」の部分に入れ替えました!

Twitter埋め込みコード作成ページ

ホームページを確認すると・・・

キチンと反映されていますね!急遽ツイッターアカウントを作成して、テストツイートを2回しましたが、反映されています!

コピーライトを変更

よし!後もう少しです!コピーライトを変更しましょう!

「外観 > テーマを編集」からテーマフッター(footer.php)を探して53行目あたりにある、以下の部分を書き換えます。あなた(サイト)の名前とurl、サイトを作成した年を記入するだけ!

<p class="col-xs-12 text-center">Copyright - <a href="https://manablog.org/">Manabu Bannai</a>, 2016 All Rights Reserved.</p>

博士はシシトウ団ように(ry

<p class="col-xs-12 text-center">Copyright - <a href="https://shishitoudan.com/">シシトウ団</a>, 2019 All Rights Reserved.</p>

その他の変更・追加

他に変更したいところはありますが、記事がかなり長くなってきたので、別記事で紹介しようと思います。

これでminimalの初期設定は完了!

やっと・・・初期設定が終わりました・・・疲れた・・・これをみて皆さんがしっかり初期設定が出来た事を祈ります。

もし今回の設定でわからない事があればツイッターなどで連絡をくれれば、力になれると思いますので、お気軽に連絡ください!(連絡に気づけば)

今回の記事作成にかかった時間

  • 記事構成 20分
  • Minimalの説明 18分
  • 文章作成&設定 273分
  • 記事作成中に飽きてさぼった回数 32回

合計作業時間 311分と32回のさぼり

  • カテゴリー

    ワードプレス

    ワードプレス

    ワードプレスの使い方やオリジナルテーマなど色々な方法をここに書いているぞ!

    ブログ・ブロガー

    ブログ・ブロガー

    ブログの執筆方法やブロガーのなり方など色々な方法をここに書いているぞ!

    デザイン

    デザイン

    デザインの使い方やオリジナルテーマなど色々な方法をここに書いているぞ!