stinger3トップページに案内用ページを追加
stinger3のトップページに案内用（お知らせ）ページ（固定ペー
ジ）を作成して、ブログを更新しても常に読んで貰いたいお知らせ
等を、案内用のページに書き込んで置けば、読者様からのクリック
率もアップすると思います。
以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です。
記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。
尚、修正したソースコードは、必ずＦＴＰソフトを使ってサーバー
にアップ。または各サーバーのオプション（ファイルマネージ
ャー）等（例はさくらサーバーです）で編集してください。
バックアップは忘れずに！！！
トップページに案内用ページを追加させる
どこに表示させるかというと、グローバルメニューと投稿ページの
間に表示させました。
カスタマイズ前の画像
カスタマイズ後の画像
固定記事のタイトルを表示させて、クリックすればその内容ページ
へジャンプする仕組みです。
カスタマイズ
今回のカスタマイズで修正するファイルは3つ、Stinger3の「home.
php」と僕は専用子テーマ「かしわもち」を使用しているので子
テーマの「style.css」「smart.css」です。
子テーマを使用していない方は、「style.css」「smart.css」です。
まずはhome.phpに追加していきます。
「home.php」に追加
追加前のコードは以下のようになっていると思います。
（先頭行です。)
[php]
<?php get_header(); ?>
<div class="post kizi">
<!–ループ開始–>
<div id="dendo"> </div>
<!– /#dendo –>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="entry">
<div class="sumbox"> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php
[/php]
上記コードの
「<div class=”post kizi”>」の前に
下記コードを追記します。
[php]
</pre>
<div class="topper">
<h2>INFORMATION</h2>
テーマはニュースと初心者に役立つ情報をみなさんにお届けします
<blockquote>
<h3>注目のコンテンツ</h3>
<br>
<ul>
<li><a href="リンクさせたいＵＲＬ">タイトル</a></li>
<li><a href="リンクさせたいＵＲＬ">タイトル</a></li>
<li><a href="リンクさせたいＵＲＬ">タイトル</a></li>
</ul>
</blockquote>
</div>
<pre>
</pre>
[/php]
追記したらコード内にある下記コードをお好みに変更します
① 「<h2>INFORMATION</h2>」の「INFORMATION」 のページタイ
トルをお好みに変更する。
② その下の「テーマはニュースと初心者に役立つ情報をみなさん
にお届けします」もお好みの文章に変更する。
③ 「<h3>注目のコンテンツ</h3>」の「注目のコンテンツ」もお
好みに変更します。
④ 「<li><a href=”リンクさせたいＵＲＬ”>タイトル</a></li>」
内の”リンクさせたいＵＲＬ”にリンク先のＵＲＬを、タイトル
箇所にはそのタイトルを入力します。
⑤ 注目のコンテンツ内のコンテンツを増やす場合は、
「<li><a href=”リンクさせたいＵＲＬ”>タイトル</a></li>」
を追加します。
定期的に読者に案内情報を変更する時は、④・⑤のところを変更し
ます。
あなたのブログにも依りますが、コンテンツの数が多いと、記事が
読まれなくなる可能性があると思います。
なのでコンテンツは２～３個が妥当だと思います。
ファイルを更新ボタンをクリックして、表示させると、下記のよう
になると思います。（僕の場合です。）
ＣＳＳにコードを追記します
子テーマを使用してる場合は、子テーマのstyle.cssとsmart.cssの
最後尾に追記します。
子テーマを使用していない場合は、
stinger3のstyle.cssとsmart.cssの最後尾に追記します。
[css]
/*—————————–
topper
——————————*/
.topper {
background: none repeat scroll 0 0 #ededed;
border-top: 6px double #ccc;
margin-bottom: 10px;
margin-top: 0;
padding: 10px 10px;
border-bottom: 6px double #ccc;
box-shadow: 0 10px 25px -10px #333;
}
.topper h2 {
background: none repeat scroll 0 0 #3556b3;
color: #FFFFFF;
font-size: 20px;
line-height: 30px;
margin: 0px 0 20px 10px;
padding: 5px 10px 5px 20px;
border-left: 20px solid #3556b3;
}
.topper p{
font-size: 14px;
margin: 0px 0 10px 10px;
}
.topper img{
width: 98%;
height: 98%;
margin: 0px 10px 10px 10px;
padding: 0px 20px 10px 0px;
}
.topper blockquote {
font-size: 14px;
background-color: #ffffff;
background-position: left top;
border-left: 10px solid #3556b3;
margin: 10px 0 10px 10px;
padding: 10px 15px 10px;
}
[/css]
以上で完成です。
今後今以上に個性が出るようにカスタマイズしていきます。
参考にした記事一覧
一介の市民の PC TIPS集 様より
【Stinger3カスタマイズ】TOPページなどに固定ページの内容を挿
入する。
金猿日記 様より
WordPressで固定ページの内容をトップページなどに表示させる方
法
上記記事を参考にして貰いいました。
アリガトウございます。
コメント