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

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


1.  テーマの構成

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

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


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

管理メニューの外観からメニューを選びます

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

新たに作成したメニューを選択して編集します

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

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

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

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


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

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

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

ここではBreadcrumbNavTXを追加します
区切りマークやホームアイコンなどの設定をします

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

パンくずの区切り
<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. フッターのウィジェットの設定

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


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

左側のウィジェットの項目よりカスタムHTMLを追加します。内容のところに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;
}

青いマーカーの部分をご自分のサイトのアドレスに変更してください。
テーマによって、変更箇所は2~4カ所ありますので、全部変更してください。

YOU MAY ALSO LIKE
overlay

【図解】WordPressテーマのインストールの仕方

overlay

WordPressテーマのご利用について

Administrator
littledream

個人的に収集したビンテージなパブリックドメインの画像を配布しています。好物はお寿司です。都市伝説が大好きです。パニック障害を持病に持つ自身のことなどをブログにも綴っています。

lamp lamp

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください