パソコン・ソフトウエア

stinger5(スティンガー)カスタマイズ方法 まとめ

この記事は自分の会社のホームページをワードプレスで作り、stinger5をカスタマイズして運用した時のまとめ記事です。

もうホームページはワードプレスで運用してないので、この記事も削除しようかと思いましたが記念にとっておこうと思います。
(特に意味なし)

目次

ヘッダーを画像に変更

stinger5企業ロゴの追加
新しくリリースされた「stinger5」ではヘッダーにロゴ画像を挿入するのが、デフォルトで簡単にできるようになっているようですので、ワードプレスのダッシュボードから「カスタマイズ」を選択します。

stinger5カスタマイズ
次の画面で「ロゴ画像」を選択して、ロゴにしたい画像をアップロードします。

stinger5ビジネステンプレート
アップロードすると、上記のような画面になります。

stinger5ビジネステンプレート
次にロゴ画像の背景色が白にしてあるので、全体の色も白で統一したいと思います。
サイドバーの「色」を選択して白に設定します。

stinger5カスタマイズする方法
次にロゴの下の部分の文字をとりあえず消したいと思います。SEO的にはよくないかもしれませんが、後で代替としてなんとかします(笑)
「サイトタイトルとキャッチフレーズ」を選択してキャッチフレーズ部分を削除します。

その後上部の、保存して公開を選択すればOKです。

ここまでの完成画像

stinger5企業ホームページ風にカスタマイズ
ここまでの完成画像です。
かなり殺風景な感じですね。

次回はヘッダーに電話番号を入れたいと思います。

ヘッダーに企業電話番号の追加

スティンガー5をビジネステンプレートにヘッダーに企業電話番号の追加
前回企業ロゴを挿入する方法を解説しましたが、今回は上記画像のようなヘッダー部分に、企業の電話番号を入れる方法を紹介します。
※ぼかしの入っている部分です。

画像のアップロード

まず企業電話番号の入った画像を作成します。作成方法はいろんなやり方があるのではぶきます。

今回は325px×111pxで画像作成しアップロードしました。
アップロード方法はワードプレスのダッシュボードから「メディア」→「新規追加」でアップロードできます

ヘッダーの編集

次にヘッダーの編集をします。
ワードプレスのダッシュボード部分から、「外観」→「テーマの編集」→「header.php」を選択します。

ワードプレスヘッダーに企業電話番号の追加
編集部分はheader.phpファイルの真ん中よりちょっと下の部分です。挿入位置は、上記画像を参考にしてください。
画像をクリックすれば、拡大画像が見れます

挿入コード

<div style="float:left;">
    <img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url(get_option('stinger_logo_image')); ?>" />
</div>
<img src="http://画像のアドレスが入ります"/>

こちらは挿入コードです。
2行目はもともとあるコードになります。

スクリーンショット 2014-11-06 22.56.43
今回は「stinger5カスタマイズ」第3回目「グローバルナビの変更」です。
企業ホームページみたいにするには重要なポイントだと思います。

前回の記事はこちら
[stinger5]スティンガー5をビジネステンプレートに、カスタマイズする方法 第2回「ヘッダーに企業電話番号の追加」

デフォルト画像の削除

最初によくある企業のホームページだと、グローバルナビがロゴの下にある形が多いのでその形にする為に、デフォルトであるスティンガー5の画像を消したいと思います。消す方法はとても簡単です。

stinger5カスタマイズ
ダッシュボードから「外観」→「カスタマイズ」を選択します。

stinger5カスタマイズ
その後ヘッダー画像を選択して、画像を非表示にすればOKです。

stinger5カスタマイズ
上記は非表示にした時の画像です。

グローバルメニューの変更

グローバルメニューの変更は「外観」→「テーマの編集」
から「style.css」ファイルを編集することで変更できます。

stinger5編集部分
「style.css」ファイルを開き、画面をスクロールしていくと真ん中あたりに、上記の画像と同じ部分がありますので、そこを編集します。
メニューと記載されているところから、ページャーのとことまでがグローバルメニューの部分です。

nav  {
     line-height: 100px;
        background-color: #FF0000;
        color: #ffffff;
}


nav li {
     	position: relative;
	float: left;
	font-size: 18px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #CCC;
	padding-top: 5px;
	padding-bottom: 5px;
}
nav li li {
        line-height: 60px;
	float: left;
	font-size: 18px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: none;
}
nav li a {
       line-height: 60px;
        float: left;	
	text-decoration: none;
}
.menu-navigation-container {
	overflow: hidden;
}
nav li a:hover {
     color: #ffffff;
       line-height: 60px;
	text-decoration: none;
}
nav li li {
       line-height: 60px;
	float: left;
	font-size: 18px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: none;
}
nav li a {
       line-height: 60px;
	float: left;	
	text-decoration: none;
}
.menu-navigation-container {
	overflow: hidden;
}
nav li a:hover {
       line-height: 60px;
        color: #FFFFFF;
	text-decoration: none;
}

かなり簡単ですが、編集してみました。
cssの知識があればそれほど難しくはないと思いますので、サイトにあったデザインに変更してみてください。

後日下記のコードにナビ部分だけ変更しました
色の変更とナビを丸めるための設定をしました。

nav  {
     line-height: 100px;
        background-color: #DAA520;
        color: #ffffff;
        border-radius: 10px;        
   -webkit-border-radius: 10px;   
   -moz-border-radius: 10px;  }

作成したナビ

スティンガー5グローバルナビ作成
上記が作成した、簡単なグローバルナビです。

2015年2月9日ナビの変更

10

今回再度ナビの変更をしました。下にコードを記載します。
色を変えたのと、枠を作ってみました。

nav  {
color: #ffffff;
border-top:solid 4px #fffacd;
border-bottom:solid 3px #2f4f4f;
border-right:solid 1px #fffacd;
border-left:solid 1px #fffacd;
font-weight: bold;
line-height: 20px;
background-color: #ffb6c1;
        font-color: #ffffff;
        border-radius: 15px 15px 0px 0px;        
   -webkit-border-radius: 15px 15px 0px 0px;   
   -moz-border-radius: 15px 15px 0px 0px;  }


nav li {
    	position: relative;
	float: left;
	font-size: 18px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #ffffff;
	padding-top: 5px;
	padding-bottom: 5px;
}
nav li li {
	float: left;
	font-size: 18px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: none;
}
nav li a {
        float: left;	
	text-decoration: none;
}


.menu-navigation-container {
	overflow: hidden;
}


nav li a:hover {
         	text-decoration: none;
}
nav li li {

     	float: left;
	font-size: 18px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: none;
}
nav li a {
	float: left;	
	text-decoration: none;
}
.menu-navigation-container {
 	overflow: hidden;
}
nav li a:hover {
      	text-decoration: none;
}



グローバルナビの下に「Meta Slider」を使用して、スライド画像の挿入

今回は上記画像のようにグローバルナビの下にスライド画像を挿入してみたいと思います。

スライド画像作成

スライド画像の作成には「Meta Slider」というプラグインを使用し「ショートコード」を作成します。
インストール方法とショートコードについては下記のリンク先で紹介しています。
ワードプレス プラグイン「Meta Slider」 のインストールと使用方法

ショートコードを挿入する方法は下記のリンク先で紹介しています。
スティンガー(stinger)のテーマのトップ、投稿ページ、に「Meta Slider」を挿入する方法

ショートコードの挿入位置

スティンガー5 カスタマイズ 
次にスライド画像を入れるため「Meta Slider」を使用して作成された、シュートコードを挿入します。

ワードプレスのダッシュボードから、テーマの編集を選択して「home.php」をの編集画面にし、上記画像にもありますが、挿入位置は上から4行目に作成されたショートコードをいれます。

ショートコードを入れるときの注意点

<?php echo do_shortcode( 'ショートコードが入る部分' ); ?>

ショートコードを入れるときの注意点としては、上記のコードのようにphpコードを使用して挿入することです。
「ショートコードが入る部分」の所に作成したショートコードをそのままいれれば大丈夫です。

最後に作成したトップページ

スティンガー5 カスタマイズMeta Slider 
これで上記のように、トップページにスライド画像が入ると思います

グローバルナビの下に「Meta Slider」を使用して、スライド画像の挿入

今回は上記画像のようにグローバルナビの下にスライド画像を挿入してみたいと思います。

スライド画像作成

スライド画像の作成には「Meta Slider」というプラグインを使用し「ショートコード」を作成します。
インストール方法とショートコードについては下記のリンク先で紹介しています。
ワードプレス プラグイン「Meta Slider」 のインストールと使用方法

ショートコードを挿入する方法は下記のリンク先で紹介しています。
スティンガー(stinger)のテーマのトップ、投稿ページ、に「Meta Slider」を挿入する方法

ショートコードの挿入位置

スティンガー5 カスタマイズ 
次にスライド画像を入れるため「Meta Slider」を使用して作成された、シュートコードを挿入します。

ワードプレスのダッシュボードから、テーマの編集を選択して「home.php」をの編集画面にし、上記画像にもありますが、挿入位置は上から4行目に作成されたショートコードをいれます。

ショートコードを入れるときの注意点

<?php echo do_shortcode( 'ショートコードが入る部分' ); ?>

ショートコードを入れるときの注意点としては、上記のコードのようにphpコードを使用して挿入することです。
「ショートコードが入る部分」の所に作成したショートコードをそのままいれれば大丈夫です。

最後に作成したトップページ

スティンガー5 カスタマイズMeta Slider 
これで上記のように、トップページにスライド画像が入ると思います

トップページ 新着情報表示の変更

今回は、スティンガー5のカスタマイズ5回目として、記事を追加した時に、メインコンテンツ部分に新着記事が表示されないようにして、違う情報を表示させる方法を紹介したいと思います。

新着記事の非表示

トップページ 新着情報表示の変更
変更するにはワードプレスのダッシュボードから、テーマの編集を選択して、「home.php」のコードを編集します。
編集部分は上記画像のコード4行目で、こちらを削除するだけです。

トップページ 新着情報表示の変更
上記画像は削除後のコードです。
これだけで、メインコンテンツに新着情報は表示されなくなります。

トップページ 新着情報表示の変更
こちらが、メインコンテンツに新着情報が表示されなくなった画像です。

じゃあその部分に、違う情報をどうやれば、表示できるのかというと、それも簡単です。
先ほど削除した部分に、表示させたい情報を記載すればいいだけです。

メインコンテンツに違う情報を表示

トップページ 新着情報表示の変更
先ほど削除した部分に、見出したタグの [h2]などを使用してコードを記載してみました。
下記の画像が、コードを追加記載して、更新後の画像です。

トップページ 新着情報表示の変更
このような方法で、直接削除した部分にコードを入れて、トップページを作ることもできます。

最後に

他にもいろいろトップページのカスタマイズ方法はあると思いますが、今回は「home.php」を編集して、カスタマイズしてみました。

1
今回はスティンガー5 カスタマイズ第6回「サイドバーの変更」を紹介したいと思います。

サイドバーで必要ないメニューの削除

2
今回は企業のホームページ用として「スティンガー5」をカスタマイズしているので、必要ないものがたくさんあります。
ワードプレスを使っている人でしたらあたりまえのことですが、サイドバーはワードプレスダッシュボードの「外観」から「ウィジェット」を選択すれば簡単に、メニューの削除や追加ができます。

今回はリサイクルショップのホームページを作成しているのでいろいろ削除しました。
・最近の投稿
・新しいコメント
・アーカイブ
・カテゴリー
・メタ情報
こちらを全部削除しました。カテゴリーはうまく使えば、リサイクルショップのサイドバーのメニューとして使用できるとも思ったのですが、とりあえずやめました。

サイドバーの「New Post」文字の変更

6
次にサイドバーの上記画像「New Post」と表示される文字の変更方法です。

5
ワードプレスダッシュボードの「外観」→「テーマの編集」から「sidebar.php」を選択して、上記画像の6行目の「New Post」部分を削除して変わりに表示させたい、文字をいれます。今回は「新入荷&新着情報」にしました。

7
上記画像が変更後の画像です。
いまいちインパクトが無いのでスタイルシートをいじって、インパクトをつけたいと思います。

8
今度は「style.css」ファイルを開きます。
少しスクロールしていくと、真ん中より少し上の位置ぐらいに、上記画像のような「サイドバー」と表示されている部分があります。
こちらを変更すれば、先ほどの部分が変わります。

10
上記画像のように変更しました。

コードは下記になります。簡単にコピペできます。

aside h4 {
	font-size: 20px;
        color: #fff;
        border-radius: 15px 15px 0px 0px;        
        -webkit-border-radius: 15px 15px 0px 0px;   
        -moz-border-radius: 15px 15px 0px 0px;
	font-weight: nomal;
	line-height: 30px;
        background-color: #FF4500;
	margin-bottom: 5px;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 65px;

}
.menu_underh2{
	        color: #fff;
       }



変更後のサイドバーはこちら

12
変更後のサイドバー上記画像になります。
今回はここまでで終わりにしますが、次回もサイドバーのカスタマイズの続きをしたいと思います。

「サイドバーの変更」要約文の省略 方法
今回はスティンガー5 カスタマイズ第7回目「サイドバーの変更」で上記画像の矢印部分、「要約文の省略」方法を紹介します。

要約文の省略

newpost.phpを開く

ワードプレスダッシュボードの画面から「外観」→「テーマの編集」で「newpost.php」を開きます。

編集場所

「サイドバーの変更」要約文の省略
「newpost.php」を開いたら上記画像にも記載しましたが、その部分を削除するか「」で囲めば要約文が省略されます。
※「」で囲んでの省略であれば、あとで最初の状態に戻したくなれば、簡単に戻せます。

下記はコード

 <!--     
      <div class="smanone">
        <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>
      </div>
-->
完成画像

サイドバーの変更」要約文の省略 方法
上記画像のように、タイトルだけ表示されるようになりました。

スティンガー5(stinger5) カスタマイズ
今回紹介するのは、上記画像のコンテンツ部分の幅を広げてめいいっぱいコンテンツを表示する方法を紹介します。

スティンガー5のデフォルトだと、メインコンテンツ部分は両サイド、余白が結構あります。
企業用に変更するとなるとこの余白が、少なめの方がいいと思いますのでカスタムします。

コンテンツ部分の幅を広げる方法

スティンガー5(stinger5) カスタマイズ
最初にワードプレスのダッシュボードの画面から、「外観」→「テーマの編集」を選択して「style.css」ファイルを開きます。

カスタマイズ第8回目「コンテンツ部分の幅を広げる方法」
画面を下のほうまでスクロールしていくと「main」と記載されているタグがあります。この部分の「pading」を両方「0px」にすれば、余白部分がなくなります。

500
上記画像のように「0px」に変更します。

padingとは

「pading」は余白などを作るときに使われます。

pading: 5px 10px 15px 20px; このように記載されている場合は [上に5px] と [右に10px] と [下に15px] と [左に20px] 余白を作ると指示しています。

pading: 5px 10px;このように記載されている場合は[上下]に5px と [左右]に10pxと言う意味です

padding: 5px; このように記載されている場合は[上下左右]すべて5pxと言う意味です。

今回のスティンガー5のテーマの場合は「pading: 20px 40px;」と記載されていたので[上下]に20px と [左右]に40px余白を作っていたということになります。

余白は見栄えをよくしたり、文字を読みやすくするために、必要な部分ですので、今回は0pxにしてしまいましたが、多分あとで他のバランスを考えながら修正すると思います。

最後に

カスタマイズ第8回目「コンテンツ部分の幅を広げる方法」
余白をなくしてこんな感じになりました。

stinger5エントリー日を入れる
今回はサイドバーのカスタマイズの追加として、新着情報部分に、最初に記事を書いたエントリー日を表示させる方法についてです。
上記画像の矢印部分に、記事を書いたエントリー日を表示させたいと思います。

追加するコード

stinger5 カスタマイズ
追加するコードをいれる部分はテーマの編集から「 newpost.php」を選択します。
上記画像のようにコードを追加して変更します。

タイトルの文字の大きさも、少し大きすぎてバランスが悪かったので、一緒にタグで囲んで、同じ大きさにしてしまいました。
多分あとで変更しますが・・・

「spanとp」」の終了位置を「time」の後に変更すれば、タイトル文字の大きさはそのままにすることもできます。

newpost.php(コピペに使ってください)

<div id="kanren">
  <?php
$args = array(
    'posts_per_page' => 5,
);
$st_query = new WP_Query($args);
?>
  <?php if( $st_query->have_posts() ): ?>
  <?php while ($st_query->have_posts()) : $st_query->the_post(); ?>
  <dl class="clearfix">
    <dt> <a href="<?php the_permalink() ?>">
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php the_post_thumbnail( 'thumb150' ); ?>
      <?php else: // サムネイルを持っていないときの処理 ?>
      <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
      <?php endif; ?>
      </a> </dt>
    <dd>
      <h5><a href="<?php the_permalink(); ?>" >


<p> <span class="kdate"><i class="fa fa-calendar"></i>入荷日&nbsp;
                <time class="entry-date" datetime="<?php the_time('c') ;?>"> 
               <?php the_time('Y/m/d') ;?> 
                </time><br />

        <?php the_title(); ?>
        </a></h5>

 </span> </p>


 <!--     <div class="smanone">
        <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>
      </div>
-->
    </dd>
  </dl>
  <?php endwhile; ?>
  <?php else: ?>
  <p>新しい記事はありません</p>
  <?php endif; ?>
  <?php wp_reset_postdata(); ?>
</div>

最後に変更後の画像

stinger5サイドバーカスタマイズ
記事をエントリーした日時が入りました。

運用中のホームページはこちら

2015年1月から運用中です。
よかったら覗いてみてください。
カスタムして運用中!!「リサイクルショップ宝島 ホームページ」はこちら

スティンガー5(stinger5) カスタマイズ第10回目 固定ページのぱんくずリストの変更方法
今回は上記画像部分 固定ページのぱんくずリストの変更方法を紹介します。

企業のホームページを作成しているのですが、デフォルトだとパンくずリストの文字の大きさが少し大きいので変更します。

style.cssファイルの編集

1000
ワードプレスのダッシュボードから、テーマの編集を選択してstyle.cssファイルを開きます。

上記画像のように新しくコードを追加し、「ファイルを更新」を選択します。

追加コード

.pannkuzu-entry-title {
	font-size: 14px;
	line-height: 20px;
	color: #333;
	margin-bottom: 10px;
       
}

page.phpファイルの編集

ワードプレス固定ページのカスタマイズ

次に固定ページテンプレート (page.php)を開き、上記画像の部分「entry-title」を「pannkuzu-entry-title」に変更します。

最後に完成した画像

ワードプレスstinger5のカスタマイズ
文字を少し小さくしたことにより、バランスがよくなりました。
本当は右に表示させるようにしたかったのですが、うまくいきませんでした(笑)

今回はスティンガー5(stinger5) カスタマイズ第11回目 見出しタグh3の変更方法です。

style.cssの編集

スティンガー5(stinger5) ビジネステンプレートふうにカスタマイズ
テーマの編集から、「style.css」を開きます。編集箇所は画面をスクロールしていき、下のほうにあります。
上記画像を参考にしてください。「小見出し」と記載されていますので、わかりやすいと思います。

編集したコードはこちら

.post h3 {
	font-size: 17px;
	margin-bottom: 10px;
	margin-top: 10px;
	padding-top: 7px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 20px;
	color: #333333;
	line-height: 20px;
	background-repeat: no-repeat;
	background-position: left center;
	margin-left: 0px;
        background-color: #FFE4E1;

	
}
完成した見出しタグ

スティンガー5(stinger5) カスタマイズ第11回目 見出しタグh3の変更 背景色ピンク
背景色をピンクっぽい色にしてみました。

スティンガー5 固定ページ公開日を非表示にする方法
スティンガー5 カスタマイズ記事の第12回目 固定ページの公開日を非表示にする方法を紹介します。
ブログでは公開日を表示させる機能は、あったほうがいいと思いますが、企業のホームページでは、固定ページに公開日を表示させるのは意味がないと思いましたので、非表示に変更します。

エディターを開く

wordpress固定ページ公開日を非表示にする方法
まずワードプレスダッシュボードの外観から、エディターを開きます。 
※ワードプレスのバージョンによっては、エディターではなく、テーマの編集になっています

page.phpを開く

1000
次に固定ページテンプレート (page.php)を開き、上記箇所を削除または

<!-- -->

で囲みます。
削除しない方法で残しておけば、やっぱり公開日を表示したいときなどに、簡単に戻すことができます。

完成したホームページ画像

ワードプレス固定ページ公開日を非表示にする方法
簡単に非表示にできました。

今回はスティンガー5の企業のホームページにカスタマイズ第13回目、サイドバーの新着記事部分を特定のカテゴリのみだけ表示させる方法です。

デフォルトの設定だと、追加した記事はカテゴリ関係なく、5件表示させる設定になっています。
これを特定のカテゴリの最近投稿した記事10件表示させるようにしたいと思います。

サイドバー(newpost.php)のコード

サイドバー(newpost.php)のコードを変更するには、ワードプレスのダッシュボードから「外観」→「エディター」を開き(newpost.php)のファイルを選択します。

そして、下記のコードが今回まででカスタマイズして作成したコードです。
特定カテゴリだけ表示させるようにしたいので、さらにコードを変更します。

<div id="kanren">
  <?php
$args = array(
    'posts_per_page' => 5,
);
$st_query = new WP_Query($args);
?>
  <?php if( $st_query->have_posts() ): ?>
  <?php while ($st_query->have_posts()) : $st_query->the_post(); ?>
  <dl class="clearfix">
    <dt> <a href="<?php the_permalink() ?>">
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php the_post_thumbnail( 'thumb150' ); ?>
      <?php else: // サムネイルを持っていないときの処理 ?>
      <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
      <?php endif; ?>
      </a> </dt>
    <dd>
      <h5><a href="<?php the_permalink(); ?>" >


<p> <span class="kdate"><i class="fa fa-calendar"></i>入荷日&nbsp;
                <time class="entry-date" datetime="<?php the_time('c') ;?>"> 
               <?php the_time('Y/m/d') ;?> 
                </time><br />

        <?php the_title(); ?>
        </a></h5>

 </span> </p>


 <!--     <div class="smanone">
        <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>
      </div>
-->
    </dd>
  </dl>
  <?php endwhile; ?>
  <?php else: ?>
  <p>新しい記事はありません</p>
  <?php endif; ?>
  <?php wp_reset_postdata(); ?>
</div>


変更後のコード

<div id="kanren">
<?php query_posts('cat=4&posts_per_page=10&paged='.$paged); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>



  
  <dl class="clearfix">
    <dt> <a href="<?php the_permalink() ?>">
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php the_post_thumbnail( 'thumb150' ); ?>
      <?php else: // サムネイルを持っていないときの処理 ?>
      <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
      <?php endif; ?>
      </a> </dt>
    <dd>
      <h5><a href="<?php the_permalink(); ?>" >


<p> <span class="kdate"><i class="fa fa-calendar"></i>入荷日&nbsp;
                <time class="entry-date" datetime="<?php the_time('c') ;?>"> 
               <?php the_time('Y/m/d') ;?> 
                </time><br />

        <?php the_title(); ?>
        </a></h5>

 </span> </p>


 <!--     <div class="smanone">
        <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>
      </div>
-->
    </dd>
  </dl>
  <?php endwhile; ?>
  <?php else: ?>
  <p>新しい記事はありません</p>
  <?php endif; ?>
  <?php wp_reset_postdata(); ?>
</div>
 

主な変更点としては、上記コードの2行目と3行目です。

2行目のcat=の後の4がカテゴリIDをさしています。
page=の後の10が表示させたい記事数をさしています。

自分で作成した、カテゴリーのIDを調べるには下記の記事を参考にしていただければわかると思います。
ワードプレス(WordPress)カテゴリIDを調べる方法

コード変更後の画像

第13回目 スティンガー5カスタマイズ サイドバーの新着記事を特定のカテゴリのみ表示
「newpost.php」を変更した事によりこんな感じになりました。
カテゴリID4の記事を10件表示させています。

今回は第14回目 スティンガー5カスタマイズ 「プラグイン Contact Form 7」を使ってお問い合わせフォームの作成です。
企業のホームページになると、お問い合わせフォームは必須になってくると思います。

今回はお問い合わせフォームをプラグインを使用して作成しようと思います。

プラグインの追加

第14回目 スティンガー5カスタマイズ 「プラグイン Contact Form 7」を使ってお問い合わせフォームの作成
まずワードプレスのダッシュボードから、「プラグイン」→「新規追加」でContact Form 7を検索して、インストールし有効化にします。

プラグインの設定

次に「プラグイン Contact Form 7」の設定をします。
ダッシュボードの「プラグイン」→「インストール済みのプラグイン」を選択して、Contact Form 7のところの設定を選択します。

フォームの編集

第14回目 スティンガー5カスタマイズ 「プラグイン Contact Form 7」を使ってお問い合わせフォームの作成
次に新規で作成してもいいのですが、最初からあるフォームを編集して作成します。

少しだけ変更

第14回目 スティンガー5カスタマイズ 「プラグイン Contact Form 7」を使ってお問い合わせフォームの作成
次に上記画像の部分を少しだけ変更します。

電話番号の項目の追加

第14回目 スティンガー5カスタマイズ 「プラグイン Contact Form 7」を使ってお問い合わせフォームの作成
新しく電話番号項目を作りたいので、右側にある「タグの作成」を選択して、電話番号を追加します。

第14回目 スティンガー5カスタマイズ 「プラグイン Contact Form 7」を使ってお問い合わせフォームの作成
こちらのコードをコピーする。

作成したコード

第14回目 スティンガー5カスタマイズ 「プラグイン Contact Form 7」を使ってお問い合わせフォームの作成
第14回目 スティンガー5カスタマイズ 「プラグイン Contact Form 7」を使ってお問い合わせフォームの作成
作成したコードはこちらです。

コードのコピー

第14回目 スティンガー5カスタマイズ 「プラグイン Contact Form 7」を使ってお問い合わせフォームの作成
保存をしてから、上記画像の矢印部分のコードをコピーします。

固定ページに貼り付ける

次に固定ページを新規で作成して、先ほどコピーしたコードを固定ページのコンテンツ部分に貼り付けます。

出来上がったお問い合わせフォーム

第14回目 スティンガー5カスタマイズ 「プラグイン Contact Form 7」を使ってお問い合わせフォームの作成
簡単ですが、お問い合わせフォームのページが完成しました。
デザインなどイマイチですので、後でこれもカスタマイズしようと思います。

今回はスティンガー5カスタマイズの第15回目、トップページに特定のカテゴリの記事をお知らせとして入れる方法を紹介します。 

先に完成画像

第15回目 スティンガー5カスタマイズ トップページに特定のカテゴリの記事を、お知らせとして入れる方法
先に完成画像ですが、上記の画像のように、特定のカテゴリ(宝島からのお知らせ)で作成した記事を表示させるようにします。

リンク先は記事の本文につながるようにします。

特定カテゴリを表示させる

やり方的には(コード)スティンガー5カスタマイズ 第13回目 とほぼ同じ方法です。13回目はサイドバーでしたが今回はトップページになっただけです。
第13回目 スティンガー5カスタマイズ サイドバーの新着記事を特定のカテゴリのみ表示

home.phpの編集

第15回目 スティンガー5カスタマイズ トップページに特定のカテゴリの記事を、お知らせとして入れる方法
トップページを変えるには「home.php」を編集します。上記画像はhome.phpファイルです。
枠で囲んである場所は今回追加したコードです。

追加したコード

下記コードが特定カテゴリを表示させる為のコードです。

特定カテゴリと表示させたい件数は、1行目で指定しています。
catの後の9がカテゴリIDになっています。

<h2>リサイクルショップ宝島からのお知らせ</h2>
<?php query_posts('cat=9&posts_per_page=5&paged='.$paged); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
 
<div class="post">
<div class="post_date"><?php echo get_the_date('Y.m.d'); ?></div>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>


</div>
 
<?php endwhile; ?>
<?php else : ?>
 
<p>記事が見つかりません</p>
 
<?php endif; ?>

※下記画像は、新規作成の投稿ページで、今回の場合はカテゴリID9が、「宝島からのお知らせ」になっています。

第15回目 スティンガー5カスタマイズ トップページに特定のカテゴリの記事を、お知らせとして入れる方法

カテゴリIDとは

カテゴリIDとは、新規にカテゴリを作成すると割り当てられるIDです。カテゴリIDを調べる方法は以前に紹介しましたので下記のリンク先を参考にしてください。
ワードプレス(WordPress)カテゴリIDを調べる方法

home.phpのコードを公開
<?php get_header(); ?>
<div id="content" class="clearfix">
  <div id="contentInner">
<?php echo do_shortcode( '[metaslider id=28]' ); ?>
    <main>

      <article>
        <section>

<h2>買い取り強化商品</h2>
・液晶テレビ<br />
・インパクトドライバ<br />


<h2>リサイクルショップ宝島からのお知らせ</h2>
<?php query_posts('cat=9&posts_per_page=5&paged='.$paged); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
 
<div class="post">
<div class="post_date"><?php echo get_the_date('Y.m.d'); ?></div>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>


</div>
 
<?php endwhile; ?>
<?php else : ?>
 
<p>記事が見つかりません</p>
 
<?php endif; ?>







       
        </section>
        <!-- /section --> 
<?php get_template_part('sns-top'); //ソーシャルボタン読み込み ?> 
        <!-- ページナビ -->
   <!--     <?php if (function_exists("pagination")) {
pagination($wp_query->max_num_pages);
} ?> 
-->

      </article>

    </main>
  </div>
  <!-- /#contentInner -->
  <?php get_sidebar(); ?>
</div>
<!-- /#content -->
<?php get_footer(); ?>

何回もコードを追加したり、編集したので、もともとのデフォルトのコードがわからなくなったので全部公開しちゃいます。

第16回目 スティンガー5カスタマイズ 新規記事の下の、コメント文を非表示にする方法
今回は スティンガー5カスタマイズ第16回目です。
カスタマイズ部分はワードプレスのデフォルトだと、新規記事のコンテンツ部分の下に、閲覧したユーザーがコメントできる部分があります。
企業用のホームページを作成していますので、コメント部分は特に必要ないので非表示にしたいと思います。

コメント部分を非表示にするには

今回コメント部分を非表示にしたいのは。単一記事になりますので、「外観」→「エディター」から単一記事の投稿 (single.php)を開きます。

第16回目 スティンガー5カスタマイズ 新規記事の下の、コメント文を非表示にする方法
編集する部分は「ループ終了」部分の下のところです。
上記画像を参考にして削除します。

削除したコード


  <?php if( comments_open() || get_comments_number() ){
          comments_template(); } ?>         
最後に

第16回目 スティンガー5カスタマイズ 新規記事の下の、コメント文を非表示にする方法
上記画像がコード削除後の画像です。
後で戻す可能せいがある方は

<!--    -->

上記のようにコメントアウトを使うといいと思います。

今回はstinger5のカスタマイズ17回目、「float」を使用して、固定ページや単一記事内で画像を横並びにする方法を紹介します。スマフォでの表示も確認して特に問題ない方法です。

スマフォでの表示は下記の記事の方法で確認しました。
WEB製作には必須です パソコンからスマフォサイトの表示結果を、確認する方法

画像横並び「float」を使用

画像を横並びにするには「float」を使用します。

スティンガー5カスタマイズ トップページと固定ページでfloatを使用して画像を横並びにする方法

例としてトップページで上記のように、画像を横並びにしてみます。

トップページを例に

それではトップページに画像を横並びに配置したのを例に解説します。

home.phpを開く

スティンガー5画像を横並びにする方法
ワードプレスのダッシュボードから「外観」→「エディター」→「home.php」を開きます。
上記画像部分が画像を横並びに表示させるコードです。
下記で簡単に説明します。

home.php全コード

<?php get_header(); ?>
<div id="content" class="clearfix">
  <div id="contentInner">
    <main>

      <article>
        <section>
<?php echo do_shortcode( '[metaslider id=28]' ); ?>


<h2>リサイクルショップ宝島からのお知らせ</h2>
<?php query_posts('cat=9&posts_per_page=3&paged='.$paged); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
 
<div class="post">
<div class="post_date"><?php echo get_the_date('Y.m.d'); ?></div>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div> 
<?php endwhile; ?>
<?php else : ?> 
<p>記事が見つかりません</p>
 
<?php endif; ?>

<h2>お客様の不要品を是非お売り下さい!!</h2>
<a href="http://takarajima-re.com/kaitori-annnai#syuttyou"><img src="http://takarajima-re.com/wp-content/uploads/2014/11/syuttyou.jpg" alt="リサイクルショップ宝島の不用品の買い取り" width="50%" height="250" class="alignnone size-full wp-image-283"  style="float:right;" /></a>

<a href="http://takarajima-re.com/kaitori-annnai#tenntou"><img src="http://takarajima-re.com/wp-content/uploads/2014/11/tenntou.jpg" alt="リサイクルショップ宝島の不用品の店頭買い取り" width="50%" height="250" class="alignnone size-full wp-image-284" style="float:left;" /></a>

<div style="clear:both;">





<a href="http://takarajima-re.com/otoiawae"><img src="http://takarajima-re.com/wp-content/uploads/2014/11/kaitori10.jpg" alt="リサイクルショップ宝島への買取相談はこちらから" width="670" height="172" class="alignnone size-full wp-image-275" /></a>




<h2>買い取り強化商品</h2>
・液晶テレビ<br />
・インパクトドライバ<br />




      
        </section>
        <!-- /section --> 
<?php get_template_part('sns-top'); //ソーシャルボタン読み込み ?> 
        <!-- ページナビ -->
   <!--     <?php if (function_exists("pagination")) {
pagination($wp_query->max_num_pages);
} ?> 
-->

      </article>

    </main>
  </div>
  <!-- /#contentInner -->
  <?php get_sidebar(); ?>
</div>
<!-- /#content -->
<?php get_footer(); ?>

上記が全コードです。
25行目から30行目が画像を横並びにしている部分です。
26行目の最後の部分にfloatを挿入して、画像を横並びにしています。
30行目にclear:bothを入れる事によってfloatを解除しています。
画像の幅を(width=”50%”)%で指定する事により、スマフォやタブレットでみても、レイアウトが崩れないようにしました。

最後に

今回は画像を横並びに表示させる方法を解説しましたが、方法はこのほかにもたくさんあると思います。
みなさんも試してみてください。

今回はスティンガー5カスタマイズ 第18回目 トップページの大見出し(h1)をロゴ上部に表示させる方法を紹介します。

通常stinger5のデフォルトだとロゴの下に表示されるのですが、今回は企業用のホームページにカスタマイズしていますので、よくあるパターンの企業ロゴの上部に(h1)が入るようにしたいと思います。スティンガー5のカスタマイズとして大見出し(h1)の位置を変更しています
完成図は上記のような感じです。

大見出しの位置の変更方法

ワードプレスのダッシュボードから「外観」→「エディター」→「header.php」を開きます。

キャプションの上に大見出しが入っています
上記画像部分の「キャプション」の下部分上記画像のコード全部が大見出し(h1)の部分です。
この位置を変更するだけです。

変更位置

大見出しのコードを入れる位置です。
変更位置は「header」から「ロゴ又はブログ名」の間にコードを入れれば大丈夫です。

今回はワードプレスのヘッダーの表示を、パソコン版とスマフォ版で切り替えをする方法を紹介します。

テーマはstinger5を使用していますが、その他のテーマでも基本は同じですので、使えそうだったら使ってみてください。

header.phpをいじります

ほとんどのテーマで、ヘッダーは(header.php)で管理されています。
今回はここをちょっといじります。

<?php if (wp_is_mobile()) :?>
スマフォ表示
<?php else : ?>
パソコン表示
<?php endif; ?>

基本はどのテーマでも上のコードで切り替えを行えば大丈夫です。

上のコードのスマフォ部分と書いてあるところに、スマフォ用の画像やコードを。
パソコン表示とかいてあるところにパソコン用のコードを。

下に実際に上のコードをあてはめて作った、header.phpの全コードを紹介します。
基本はstinge5のヘッダーそのままで、98行目から139行目を上のコードを当てはめていじっています。

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie6" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]> <html class="i7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]> <html class="ie" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<?php if(is_category()): ?>
<?php elseif(is_archive()): ?>
<meta name="robots" content="noindex,follow">
<?php elseif(is_search()): ?>
<meta name="robots" content="noindex,follow">
<?php elseif(is_tag()): ?>
<meta name="robots" content="noindex,follow">
<?php elseif(is_paged()): ?>
<meta name="robots" content="noindex,follow">
<?php endif; ?>
<title>
<?php
global $page, $paged;
if(is_front_page()):
elseif(is_single()):
wp_title('|',true,'right');
elseif(is_page()):
wp_title('|',true,'right');
elseif(is_archive()):
wp_title('|',true,'right');
elseif(is_search()):
wp_title('|',true,'right');
elseif(is_404()):
echo'404 |';
endif;
bloginfo('name');
if($paged >= 2 || $page >= 2):
echo'-'.sprintf('%sページ',
max($paged,$page));
endif;
?>
</title>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/normalize.css">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo.ico" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/html5shiv.js"></script>
<![endif]-->
<?php wp_head(); ?>
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />
<?php } else { ?>
<?php } ?>
</head>
<body <?php body_class(); ?>>
<!-- アコーディオン -->
<nav id="s-navi" class="pcnone">
  <dl class="acordion">
    <dt class="trigger">
      <p><span class="op"><i class="fa fa-bars"></i>&nbsp; MENU</span></p>
    </dt>
    <dd class="acordion_tree">
      <ul>
        <?php wp_nav_menu(array('theme_location' => 'navbar'));?>
      </ul>
      <div class="clear"></div>
    </dd>
  </dl>
</nav>
<!-- /アコーディオン -->
<div id="wrapper">
<header> 




<?php if (is_home()) { ?>
  <h1 class="descr">
    <?php bloginfo('description'); ?>
  </h1>
  <?php } else { ?>
  <p class="descr">
    <?php bloginfo('description'); ?>
  </p>
  <?php } ?>








  <!-- ロゴ又はブログ名 -->
<?php if (wp_is_mobile()) :?>
<!-- スマフォ表示 -->
<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0"> 
 <TR ALIGN="center">
 <td style="border-style: none;">

  <a href="<?php echo home_url(); ?>/">
    <?php if (get_option('stinger_logo_image')): //ロゴ画像がある時 ?> 
    <img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url(get_option('stinger_logo_image')); ?>" />
    <?php else: //ロゴ画像が無い時 ?>
    <?php bloginfo( 'name' ); ?>
    <?php endif; ?>
    </a>
</TD> 
 <td style="border-style: none;">
<img src="http://takarajima-re.com/wp-content/uploads/2014/12/101.png"/>
</TD> 
  </TR> 
 </TABLE>
  <!-- PC表示 -->
<?php else : ?>
<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0"> 
 <TR ALIGN="center">
 <td style="border-style: none;">
  <a href="<?php echo home_url(); ?>/">
    <?php if (get_option('stinger_logo_image')): //ロゴ画像がある時 ?>
    <img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url(get_option('stinger_logo_image')); ?>" />
    <?php else: //ロゴ画像が無い時 ?>
    <?php bloginfo( 'name' ); ?>
    <?php endif; ?>
    </a>
</TD> 
 <td style="border-style: none;">
<img src="http://takarajima-re.com/wp-content/uploads/2014/12/101.png"/>
</TD> 
 <td style="border-style: none;">

<a href="http://takarajima-re.com/otoiawae"><img src="http://takarajima-re.com/wp-content/uploads/2014/12/souda.png"/></a>
</TD> 
 </TR> 
 </TABLE> 
<?php endif; ?>








  <!-- キャプション -->
    
  <!--
カスタムヘッダー画像
-->
  <div id="gazou">
    <?php if(get_header_image()): ?>
    <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
    <?php endif; ?>
  </div>
  <!-- /gazou --> 
  <!--
メニュー
-->
  <nav class="smanone clearfix">
    <?php
$defaults = array(
	'theme_location'  => 'navbar',
);
wp_nav_menu( $defaults );
?>
  </nav>
</header>

表示はどのようになっているのか

【wordpress ヘッダー】PC表示と、スマフォ表示の切り替えをするコード stinger5
これはパソコンで見たときのヘッダーです。

【wordpress ヘッダー】PC表示と、スマフォ表示の切り替えをするコード stinger5
これはスマフォで見たときのヘッダーです。
違いはお問い合わせのフォームをなくしてみました。

いままではパソコンと表示が同じだったので、スマフォの画面だと全体の幅がせまくすべてが小さく表示され、お店の電話番号が見えずらくなっていました。
それでの変更です。

最後に

最初に記載したコードは、ヘッダー以外でもスマフォと表示を切り替えたい時に使用できますので、いろいろ使えると思います。
是非使ってみてください。

作ったコードはリサイクルショップ宝島のホームページとして実際に使っています。
リサイクルショップ宝島 ホームページ

それとリサイクルショップ宝島のホームページは「stinger5」をbaseにカスタマイズして会社で使えるようなホームページにしています。
下にstinger5をカスタマイズして作った、最初からの過程を紹介していますので、よかったらどうぞ!!

ABOUT ME
akira
akira
2006年にうつ病を発症し会社を退職。1年で回復し社会復帰できましたが、2018年1月に人生2回目のうつ病を発症し、その年の6月に会社を退職。現在無職で闘病中です。人生山あり谷あり。早く寛解したいです。
ブログで月5万円収入を得る方法