WordPressテーマの初期設定について

テーマをダウンロードして適用しても、一発でデモサイトのようには残念ながら
なりません（泣）
LittleDreamのテーマはカスタマイズは自由ですが、デモサイトと同じようにしたいという方のために初期設定の方法などを解説します。ここでの解説は各テーマ共通のものになります。テーマにより他に設定が必要な場合は、個別の記事をご覧ください。

目次
1.　テーマの構成
2.　ナビゲーションの設定
3.　パンくずリストの設定
4.　フッターのウィジェットの設定
5.　個別記事下の著者のプロフィール欄
6.　function.phpの編集

1. 　テーマの構成

ZIPファイルを解凍すると、PHPファイルとCSSファイル、画像フォルダー、 screenshotの画像が入っています。テーマによっては他のフォルダが追加されていることもあります。

テーマの適用方法については、【図解】WordPressテーマのインストールの仕方を参照してください。

2.　ナビゲーションの設定

vintageroseを例にすると、メインコンテンツの上とフッターにメニューがあるため、２か所のナビゲーションを作成します。ここでは【新しいメニューを作成しましょう】をクリックして、main-menuとfooter-menu（名前はこの通りにしてください）を作成します。

新しいメニューを作成したら、

①左側の項目からメニューにする項目を選びます。メニューのタイトルなども細かく設定できます。

②どのメニューなのか必ずチェックを入れます

③メニューを保存をクリックして必ず保存しましょう

3.　パンくずリストの設定

個別ページの上部にはパンくずリストが表示されるようになっています。このメニューの表示の仕方です。

まず、プラグインを導入します。

区切りやホームアイコンはお好きなものに指定できますが、ここではデモサイトと同じにするための設定方法を紹介します。

パンくずの区切り
<img style="vertical-align:middle" src="https://icongr.am/entypo/chevron-small-right.svg?size=15&amp;color=333333">
パンくずにホームページを含める。にチェックを入れます。
ホームページテンプレート
<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Go to %title%" href="%link%" class="%type%" bcn-aria-current><span property="name"><img style="vertical-align:middle" src="https://icongr.am/clarity/home.svg?size=15&amp;color=333333"></span></a><meta property="position" content="%position%"></span>
ホームぺージテンプレート（リンクなし）
<span class="%type%"><img style="vertical-align:middle" src="https://icongr.am/clarity/home.svg?size=15&amp;color=333333"></span>

4.　フッターのウィジェットの設定

フッターの左側のウィジェットをデモサイトと同じにする場合には、ウィジェットの編集画面から設定します。

外観のウィジェットを選びます。

左側のウィジェットの項目よりカスタムＨＴＭＬを追加します。内容のところにfooter-widget.phpの中身をそのままコピー＆ペーストします。

<a href="#" name="top">
<img src="https://a-littledream.com/wp-content/themes/vintagerose/images/logo.jpg" alt="vintagerose"><span class="titlename">YOUR<br>TITLE</span></a>
<span class="info">おしゃれでかわいいワードプレステーマ</span>
<ul class="social-bottom">
<li class="instagram"><a href="https://www.instagram.com/YOURID/?hl=ja" title="管理人のinstagram" target="_blank" rel="nofollow"><img style="vertical-align:middle;" src="https://icongr.am/simple/instagram.svg?size=15&color=666666" alt="instagram-button"></a></li>
<li class="twitter"><a href="https://twitter.com/YOURID" title="管理人のtwitter" target="_blank" rel="nofollow"><img style="vertical-align:middle;" src="https://icongr.am/simple/twitter.svg?size=15&color=666666"></a></li>
<li class="line"><a href="http://line.me/ti/p/%40YOURID" title="友達とーろく" target="_blank" rel="nofollow"><img style="vertical-align:middle;" src="https://a-littledream.com/wp-content/themes/vintageroses/images
/line.png" alt="line-button"></a></li> 
<li class="pinterest"><a href="https://www.pinterest.jp/YOURID/" title="管理人の Pinterest" target="_blank" rel="nofollow"><img style="vertical-align:middle;" src="https://icongr.am/jam/pinterest.svg?size=15&color=666666"></a></li>
<li class="facebook"><a href="https://www.facebook.com/YOURID" title="管理人のfacebook" target="_blank" rel="nofollow"><img style="vertical-align:middle;" src="https://icongr.am/jam/facebook.svg?size=15&color=666666"></a></li>
<li class="contact"><a href="contact-page-url" title="mail me" target="_blank"><img style="vertical-align:middle;" src="https://icongr.am/clarity/email.svg?size=15&color=666666"></a></li>
</ul>

青で指定した部分は必要に応じて変更してください。最後に必ず保存して終わりです。

5.　個別記事下の著者のプロフィール欄

author.phpをテキストエディタで開きます。

<footer class="author">

<div class="authorimage">
<img src="<?php echo get_template_directory_uri(); ?>/images/avatar.jpg" alt="著者の画像">
</div><!--authorimageここまで -->
<div class="authortext">
<span class="name"><?php the_author(); ?></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<nav class="social">
<ul>
<li class="hateb"><a href="https://b.hatena.ne.jp/entry/panel/?url=<?php echo get_the_permalink(); ?>&btitle=<?php echo get_the_title(); ?>" title="はてなブックマーク" rel="nofollow" target="_blank"><img style="vertical-align:middle;" src="<?php echo get_template_directory_uri(); ?>/images/hateb.png" alt="b!"><span>bookmark</span></a></li>
<li class="twitter"><a href="https://twitter.com/intent/tweet?url=<?php echo get_the_permalink(); ?>&text=<?php echo get_the_title(); ?>" rel="nofollow" target="_blank" title="twitterでつぶやく"><img style="vertical-align:middle;" src="https://icongr.am/simple/twitter.svg?size=15&color=666666"><span>tweetする</span></a></li>
<li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_the_permalink(); ?>&btitle=<?php echo get_the_title(); ?>" title="facebookでシェア" rel="nofollow" target="_blank"><img style="vertical-align:middle;" src="https://icongr.am/jam/facebook.svg?size=15&color=666666"><span>シェアする</span></a></li>
<li class="line"><a href="https://timeline.line.me/social-plugin/share?url=<?php echo get_the_permalink(); ?>" rel="nofollow" target="_blank" title="LINEでシェア"><img style="vertical-align:middle;" src="<?php echo get_template_directory_uri(); ?>/images/line.png" alt="line"><span>LINEする</span></a></li>
<li class="pocket"><a href="http://getpocket.com/edit?url=<?php echo get_template_directory_uri(); ?>&title=<?php echo get_the_title(); ?>" rel="nofollow" target="_blank" title="保存する"><img style="vertical-align:middle;" src="https://icongr.am/simple/pocket.svg?size=15&color=666666" alt="line"><span>保存する</span></a></li>
<li class="contact"><a href="contact-page" title="mail me" rel="nofollow" target="_blank"><img style="vertical-align:middle;" src="https://icongr.am/clarity/email.svg?size=15&color=666666"><span>mail me!</span></a></li>
</ul>
</nav><!--socialここまで -->
</div><!--authortextここまで -->

</footer><!-- authorここまで -->

紹介文をお好きな文章に変更し、保存してファイルをアップロードしてください。

6.　function.PHPの編集

function.PHPをテキストエディタで開きます。

function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all( '/\'"[\'"].*>/i', $post->post_content, $matches );
$first_img = $matches[ 1 ][ 0 ];
if ( empty( $first_img ) ) {
$first_img = "https://a-littledream.com/wp-content/themes/romanticgirl/images/noimage.jpg";
}
return $first_img;
}