FeaturedImage

WordPress テーマ作成録 #10

やったこと

  • シェアボタンの設置
  • CSS設計の見直し
Sponsored Link

シェアボタンの設置

前回、OGPを設定しSNSでのシェアに対応したので、今回はシェアボタンの設置をした。それぞれサービスごとにシェア用のURLを設定し、URLに付与するパラメータで記事ページのURLやタイトルを指定する。記事ページのURLはget_permalink()で、タイトルはget_the_title()で取得し、urlencode()で変換して出力する。シェア先には、TwitterとFacebook、はてなブックマーク、Pocketの４つを用意した。

<div class="p-share">
<ul class="p-share__btns">
<li><a href="https://twitter.com/share?url=<?php echo urlencode( get_permalink() );?>&text=<?php echo urlencode( get_the_title() ); ?>" class="p-share__btn c-social-btn c-social-btn--twitter" target="_blank">
<?php echo do_shortcode( '[simple_icon name="twitter" color="white" size="18px" class="c-social-btn__icon"]'); ?>Twitter</a></li>
<li><a href="http://www.facebook.com/share.php?u=<?php echo urlencode( get_permalink() );?>" class="p-share__btn c-social-btn c-social-btn--facebook" target="_blank">
<?php echo do_shortcode( '[simple_icon name="facebook" color="white" size="18px" class="c-social-btn__icon"]'); ?>Facebook</a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo urlencode( get_permalink() );?>&title=<?php echo urlencode( get_the_title() ); ?>" class="p-share__btn c-social-btn c-social-btn--hatena" target="_blank">
<?php echo do_shortcode( '[simple_icon name="hatenabookmark" color="white" size="18px" class="c-social-btn__icon"]'); ?>Hatena</a></li>
<li><a href="http://getpocket.com/edit?url=<?php echo urlencode( get_permalink() );?>&title=<?php echo urlencode( get_the_title() ); ?>" class="p-share__btn c-social-btn c-social-btn--pocket" target="_blank">
<?php echo do_shortcode( '[simple_icon name="pocket" color="white" size="18px" class="c-social-btn__icon"]'); ?>Pocket</a></li>
</ul>
</div>
view raw share-button.php hosted with ❤ by GitHub

CSS設計の見直し

まだまだ悩みごとが尽きないCSSの設計。一応、FLOCSSで設計をしているが、projectかcomponentにするべきか悩むことが多く、なかなか扱いきれない。とりあえず、projectにして記述していたオブジェクトが別の個所で現れ始めたらcomponent化していくという作業で進めてみている。今回、シェアボタンを作ったことでサイドバーにあったソーシャルボタンをcomponent化し、マージンや枠線の丸みなどはprojectで扱うことにしてみた。

projectにしてあったものから共通部分をcomponent化していくという手順で少しずつCSSを書き換えていこうと思う。

まとめ

WordPressのテーマに欲しい機能はだいたいそろってきた。最近またCSS設計を見直しているので、テーマ作成としては全然進んでいないが、WordPressとして欲しい機能はだいたい実装し終えた。WordPressにショートコードを追加したりなど何かを加えたときは単発記事として取り上げていこうかなと思っているので、次回、関連記事を表示させたら一応完成ってことにしよう。（メニューボタンやフッターのデザインとかはまだ手を付けていないけどね。）