stinger3トップページに案内用ページを追加

2017年12月20日stinger3 備忘録topページ, 固定ページ, 案内ページstinger3 備忘録, 固定ページ, 案内ページ

stinger3

stinger3トップページに案内用ページを追加

 

stinger3のトップページに案内用(お知らせ)ページ(固定ペー
ジ)を作成して、ブログを更新しても常に読んで貰いたいお知らせ
等を、案内用のページに書き込んで置けば、読者様からのクリック
率もアップすると思います。

以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です。

記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。

尚、修正したソースコードは、必ずFTPソフトを使ってサーバー
にアップ。または各サーバーのオプション(ファイルマネージ
ャー)等(例はさくらサーバーです)で編集してください。

 

バックアップは忘れずに!!!

 

トップページに案内用ページを追加させる

 

どこに表示させるかというと、グローバルメニューと投稿ページの
間に表示させました。

 

カスタマイズ前の画像

st3 annai001

 

カスタマイズ後の画像

 

固定記事のタイトルを表示させて、クリックすればその内容ページ
へジャンプする仕組みです。
st3 annai002

 

カスタマイズ

今回のカスタマイズで修正するファイルは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]
&lt;/pre&gt;
&lt;div class=&quot;topper&quot;&gt;
&lt;h2&gt;INFORMATION&lt;/h2&gt;
テーマはニュースと初心者に役立つ情報をみなさんにお届けします
&lt;blockquote&gt;
&lt;h3&gt;注目のコンテンツ&lt;/h3&gt;
&lt;br&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;リンクさせたいURL&quot;&gt;タイトル&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;リンクさせたいURL&quot;&gt;タイトル&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;リンクさせたいURL&quot;&gt;タイトル&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;
&lt;/div&gt;
&lt;pre&gt;
&lt;/pre&gt;
[/php]

 

追記したらコード内にある下記コードをお好みに変更します

 

① 「<h2>INFORMATION</h2>」の「INFORMATION」 のページタイ
トルをお好みに変更する。

② その下の「テーマはニュースと初心者に役立つ情報をみなさん
にお届けします」もお好みの文章に変更する。

③ 「<h3>注目のコンテンツ</h3>」の「注目のコンテンツ」もお
好みに変更します。

④ 「<li><a href=”リンクさせたいURL”>タイトル</a></li>」
内の”リンクさせたいURL”にリンク先のURLを、タイトル
箇所にはそのタイトルを入力します。

⑤ 注目のコンテンツ内のコンテンツを増やす場合は、
「<li><a href=”リンクさせたいURL”>タイトル</a></li>」
を追加します。
定期的に読者に案内情報を変更する時は、④・⑤のところを変更し
ます。

あなたのブログにも依りますが、コンテンツの数が多いと、記事が
読まれなくなる可能性があると思います。

 

なのでコンテンツは2~3個が妥当だと思います。

ファイルを更新ボタンをクリックして、表示させると、下記のよう
になると思います。(僕の場合です。)
st3 annai003

 

 

CSSにコードを追記します

 

子テーマを使用してる場合は、子テーマの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で固定ページの内容をトップページなどに表示させる方

 

上記記事を参考にして貰いいました。

アリガトウございます。