2014-08-04

■

WordPress

WordPressdプラグインを使用せずにSNSボタンを設置する方法です。
先ず、facebookのアプリIDを取得します。

http://biz.comlog.jp/manual2/20098.html
こちらを参考に。

取得したIDを下記コードのxxxxxxxxxxxxxxxの部分に置き換える。

<!-- Facebook -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
　var js, fjs = d.getElementsByTagName(s)[0];
　if (d.getElementById(id)) return;
　js = d.createElement(s); js.id = id;
　js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=xxxxxxxxxxxxxxx";
　fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
　
<!-- Google+ -->
<script type="text/javascript">
　(function() {
　　　　var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
　　　　po.src = 'https://apis.google.com/js/plusone.js';
　　　　var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
　　})();
</script>
　
<!-- はてなブックマーク -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
　
<!-- Twitter -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
　
<!-- Evernote -->
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>

次に、functions.pnpに下記コードを記述。functions.phpは記載ミスをするとサイト自体が表示できなくなるので注意が必要。

// ソーシャルボタン
function SocialButtonVertical()
{ ?>
　　　　<ul class="sns-btn">
　　<li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>
　　　<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-via="" data-lang="ja"　>ツイート</a></li>
　　　<li><div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="box_count" data-width="72" data-show-faces="false"></div></li>
　　　<li><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></li>
　　　<li><a href="#" onclick="Evernote.doClip({}); return false;"><img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" /></a></li>
　　　</ul>
<?php }

あとは、設置したい場所に下記コードを記述すればOK。CSSのために、「box-sns」というクラス名をつけました。

<div class="box-sns">
<?php SocialButtonVertical(); ?>
</div>

CSSはこんな感じで。

.sns-btn {
overflow: hidden;
margin: 0 auto;
}
.sns-btn li {
  float:left;
  margin-right: 10px;
}
.sns-btn iframe {
  margin: 0 !important;
}

2014-08-03

■

WordPress

WordPressでスマートフォンでアクセスがあった際に出力するHTMLを切り替える方法。
という関数を使用して条件分岐させます。

<?php if (wp_is_mobile()) :?>

//ここにPCからアクセスされた際のコードを記述する

<?php else: ?>

//ここにPCからアクセスされた際のコードを記述する

<?php endif; ?>

以上で完了です。スマホ用にはsp.phpというファイルを作成してそちらにスマホ用のコードを記述すればすっきりしますね。get_template_part関数を使用して下記のように記述しています。

<?php if (wp_is_mobile()) :?>

//スマホサイト用
<?php get_template_part( 'sp' ); ?>

<?php else: ?>

//ここにPCからアクセスされた際のコードを記述する

<?php endif; ?>

2014-08-03

スマホサイトで拡大縮小を制限する方法

web制作

スマホサイトで拡大縮小を制限する方法です。
head内に以下のコードを記述します。

<meta name="viewport" content="user-scalable=no">

user-scalable=noでユーザーによる拡大縮小を制限しています。
width=device-width, initial-scale=1.0とあわせて以下のように記述すると良いですね。

 <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

2014-08-01

■

web制作

Wordpressでのスマートフォン用のfooter部分のソースコード。スマホでのみ表示を切り替えたいときに使用します。
HTML

<footer id="footer">
<section class="footer_cat">
 <h1>カテゴリー</h1>
 <ul>
  <li><a href="＃">カテゴリ</a></li>
  <li><a href="＃">カテゴリ</a></li>
  <li><a href="＃">カテゴリ</a></li>
  <li><a href="＃">カテゴリ</a></li>
  <li><a href="＃">カテゴリ</a></li>
  <li class="last"><a href="＃">カテゴリ</a></li>
 </ul>
</section>
<!-- /footer_cat -->

<div class="ad">
<!-- 広告コードを張り付ける -->
</div>
<!-- /ad -->

<nav class="footer_menu">
 <ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">カテゴリ</a></li>
  <li><a href="#">カテゴリ</a></li>
  <li><a href="#">カテゴリ</a></li>
  <li><a href="#">カテゴリ</a></li>
  <li><a href="#">カテゴリ</a></li>
  <li><a href="#">カテゴリ</a></li>
  <li><a href="#">カテゴリ</a></li>
 </ul>
</nav>
<!-- /footer_menu -->

<div class="copyright"><small>©<?php bloginfo('name'); ?></small></div>
 </footer>

CSSはこちら

#footer {
  background: #ececec;
  zoom: 1;
  padding: 20px 0 0
}
#footer:before {
  content: "";
  display: block
}
#footer:after {
  content: "";
  display: block;
  clear: both
}
#footer .ad {
  margin: 0 10px 20px;
  text-align: center
}
.footer_cat {
  background: #fff;
  margin: 0 10px 20px;
  border: 1px solid #c6c6c6;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px
}
.footer_cat h1 {
  background: #f8f8f8;
  padding: 13px 10px 10px;
  font-size: 80%;
  font-weight: 700;
  text-align: center;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-right-radius: 10px
}
.footer_cat h1 span {
  display: block;
  font-size: 94%
}
.footer_cat ul li{
  border-top: #c6c6c6 1px solid;
  font-size: 87%;
  display: block
}
.footer_cat ul li a {
  display: block;
  padding: 13px 40px 11px 15px;
  text-decoration: none;
  color: #000;
  background: url(../images/common/icon_arrow.png) right center no-repeat #fff;
  background-size: 25px 18px;
  vertical-align: top;
  line-height: 120%;
  position: relative
}
.footer_cat ul li a:hover {
  background-color: #f8f8f8
}
.footer_cat ul li a:before {
  font-size: 18px;
  position: absolute;
  left: 15px;
  top: 11px
}
.footer_cat ul li .icon-facebook, .footer_cat ul li .icon-mail, .footer_cat ul li .icon-twitter {
  padding-left: 40px!important
}
.footer_cat ul .last a{
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
  border-bottom-left-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-bottom-right-radius: 10px
}
.footer_cat .link a {
  background: url(../images/common/icon_link.png) right center no-repeat #fff;
  background-size: 32px 17px
}
.footer_menu ul {
  border-bottom: #c6c6c6 1px solid;
  zoom: 1;
  overflow: hidden;
  margin: 0 0 10px
}
.footer_menu ul:before {
  content: "";
  display: block
}
.footer_menu ul:after {
  content: "";
  display: block;
  clear: both
}
.footer_menu ul li {
  padding: 0;
  font-size: 87%;
  font-weight: 700;
  text-align: center;
  width: 50%;
  float: left;
  margin: 0 0 0 -1px;
  border-top: #c6c6c6 1px solid;
  border-left: #c6c6c6 1px solid
}
.footer_menu ul li a {
  color: #000;
  text-decoration: none;
  display: block;
  background: #fff;
  padding: 12px 0 10px
}
.footer_menu ul li a:hover {
  background-color: #f8f8f8
}
.copyright {
  color: #999;
  -webkit-font-smoothing: antialiased;
  font-size: 87%;
  text-align: center
}
.copyright small {
  font-size: 100%
}

2014-07-31

■

WordPress

Wordpressでアイキャッチ画像を使用する際のメモです。
下記のコードをfunctions.phpに記述します。

//アイキャッチ
add_theme_support( 'post-thumbnails', array( 'post' ) );
set_post_thumbnail_size( 210, 140, true );
add_image_size( 'spicatch', 105, 70, true );

<?php the_post_thumbnail('spicatch'); ?>

これで105x70のアイキャッチ画像を出力できます。スマホサイト向けのアイキャッチに良いですね。

2014-07-30

妖怪ウォッチ攻略サイト「妖怪フレンド」

コマさんかわいいよコマさん。
ということで、妖怪ウォッチの攻略サイトをwordpressで作成しました。
これからスマホ対応も行っていきたいです。

キーワード「妖怪ウォッチ」「攻略」

妖怪フレンド

2014-06-18

■

WordPress

WordPressでカテゴリーの投稿数をaタグの中に移動させる方法。

下記の記述をfunctions.phpに記述する。

add_filter( 'wp_list_categories', 'my_list_categories', 10, 2 );
function my_list_categories( $output, $args ) {
  $output = preg_replace('/<\/a>\s*\((\d+)\)/',' <span class="post-count">$1</span></a>',$output);
  return $output;
}

これでカテゴリーの投稿数をaタグの中に移動させることができます。