‘覚書’

Viewportについて

2012-07-27

スマートフォンごとに違う画面サイズをそれぞれの画面サイズに合わせるのがviewportです viewportはMETAタグで指定を行います。

ちなみにIPHONEのviewportの初期値は横幅980pxに設定されています。 そのためviewportの指定がないHTMLを表示させると非常に文字が小さくなってしまいます。

viewportの記述例

<meta name="viewport" content="プロパディ1=値1, プロパディ2=値2 ...">

 

※viewportで指定できるプロパディ
width 幅。デフォルトは980px。範囲は200pxから10000pxまで。device-widthを指定できる。
height 高さ。デフォルト値は980px。範囲は223pxから10000pxまで。device-heightを指定できる。
initial-scale 初期スケール。デフォルトはWebページを可視エリアにフィットさせる。
範囲はminimum-scaleとmaximum-scaleから測定される
minimum-scale 最小スケール。デフォルトは0.25。範囲は0から10.0まで。
maximum-scale 最大スケール。範囲は0から10.0まで。
user-scalable ユーザーが拡大・縮小できるかどうかをyes/noで指定

記述例

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

以上です。

WordPressにソーシャルボタンを設置する

2012-07-04

WordPressでのソーシャルボタンの設置方法

WP Social Bookmarking Light等のプラグインを使って設置してもいいのですが余計なプラグインは使いたくないのでプラグインを使わない方法。

下記コードをヘッダー(header.php)またはフッター(footer.php)に貼り付ける。

※ (ppId=***************の*にはFacebookのAppIDを入れる。

<!-- 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=***************";
  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.php に下記のコードを貼る

// ソーシャルボタン
function socialbutton()
{ ?>
    <ul >
        <li class="hatebuButton"><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 class="tweetButton"><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 class="likeButton"><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 class="gplusButton"><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></li>
        <li class="EvernoteButton"><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 }

ソーシャルボタンを貼り付けたい位置に下記コードを貼る。(single.phpなど)
<!-- ソーシャルボタン -->
<div class="socialbutton">
<?php socialbutton(); ?>
</div>

ソーシャルボタン用のCSSをstyle.cssなどに追加
/* ソーシャルボタン */
div.socialbutton ul{
margin: 0;
padding: 0;
}
div.socialbutton li{
list-style-type: none;
float: left;
margin-right: 10px;
}

以上です。

WoresPress プラグインtubepressでエラー

2012-06-26

WordPressのプラグインTubePressをインストールし、テストしてみたところ「DOMDocument class not found」とエラーが出たので、解決策を書き残しておきます。

 

 

 

 

ちなみにうちのサイトが稼働しているサーバーはラピッドサイトのVPS-Lプランです。

  1. ますSSHでログインしてrootになる。
  2. cd  cd /usr/local/php5/etc/
  3. extensions.iniを編集 (pico-w  extensions.ini)


<pre>;Unix Extensions
extension=spl.so
extension=simplexml.so
extension=session.so
extension=iconv.so
extension=bcmath.so
extension=bz2.so
extension=calendar.so
;extension=chasen.so
extension=ctype.so
extension=curl.so
;extension=dba.so
;extension=dbase.so
;extension=dom.so
extension=exif.so
;extension=ftp.so
extension=gd.so
extension=gettext.so
;extension=gmp.so
extension=hash.so
;extension=imap.so
;extension=json.so
;extension=kakasi.so
extension=mbstring.so
extension=mcrypt.so
extension=mhash.so
extension=mysql.so
;extension=mysqli.so
;extension=namazu.so
;extension=oci8.so
extension=openssl.so
;extension=pdo.so
;extension=pdo_mysql.so
;extension=pdo_oci.so
;extension=pdo_pgsql.so
;extension=pdo_sqlite.so
;extension=pgsql.so
;extension=posix.so
;extension=pspell.so
;extension=soap.so
;extension=sockets.so
;extension=sqlite.so
;extension=tokenizer.so
extension=xml.so
;extension=xmlreader.so
;extension=xmlrpc.so
;extension=xmlwriter.so
;extension=xsl.so
extension=zip.so
extension=zlib.so

のなかの
;extension=dom.so
をコメントアウト
extension=dom.so

で、アパッチ再起動

restart_apache

これでOK。

動画

OGP (Open Graph Protocol)について

2012-06-24

さて、今日の覚書

OGP (Open Graph Protocolってなんとなく耳にしてたんですがいままであんま気にせずにいました。

今回サイトをリニューアルするにあたって少し勉強したんで書き残しときます。

OGPとは簡単に言うとこのウェブページは何のことを書いているのかという情報を、プログラムから読めるように HTML に付加する記述方法のことらしいです。

私なりの解釈をすると最近よく見かけるソーシャルボタンありますよね?

facebookのいいねやシェアボタンとかtwitterのtweetボタンみたいなやつです。

OGPってのはそれらのボタンを押したときに正確な情報をfacebookやらtwitterやらに渡すために書く情報のことみたいです^^;

今現在はそういったソーシャルメディアが生活やビジネスの中で欠かせなくなってきているのでOGPはしっかり書いておいた方がいいと私は感じました。

具体的な書き方

書き方は非常に簡単です。

まず当サイトのOGPはこんな感じです。

<meta property="<a>og:title</a>" content="<a>佐渡島.NET | 佐渡のニュースや情報を発信中、国内旅行はぜひ佐渡へ</a>">
<meta property="<a>og:type</a>" content="<a>website</a>">
<meta property="<a>og:description</a>" content="<a>佐渡のニュースや情報を発信中、国内旅行はぜひ佐渡へ</a>">
<meta property="<a>og:url</a>" content="<a>http://sadogasima.net/</a>">
<meta property="<a>og:image</a>" content="<a>http://sadogasima.net/images/sado.jpg</a>">
<meta property="<a>og:site_name</a>" content="<a>佐渡島NET</a>">
<meta property="<a>og:email</a>" content="<a>mail@sadogasima.net</a>">
<meta property="<a>og:phone_number</a>" content="<a>080-3323-9112</a>">

みておわかりいただけるように<meta property=”<a>og:****</a>” content=”***</a>”>のような形のメタ情報を書くだけです。

簡単に説明すると

og:type
このウェブページが何のページであるかを記述(必須)
og:title
このウェブページが記述しているモノの名前(必須)
og:image
このウェブページが記述しているモノの画像(必須)
og:url
このウェブページの正式な URL(必須)
og:description
このウェブページの説明
og:site_name
このウェブページが何かのサイトに所属する場合そのサイト名
og:email, og:phone_number
という感じです。
このほかにも音声や動画を添付するときのOGPもあります。

あとwordpressで書くときはheader.phpに


<meta property="og:title" content="<?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;</p>
<p>wp_title( '|', true, 'right' );</p>
<p>// Add the blog name.
bloginfo( 'name' );</p>
<p>// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";</p>
<p>// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
?>">
<meta property="og:description" content="<?php echo trim(wp_title('', false)); if(wp_title('', false)) { echo ' - '; } bloginfo('description'); ?>">
<meta property="og:url" content="<?php print("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>">

のように記述すれば、title、description、urlは各ページごとに取得してくれます。

Welcartにイプシロン決済モジュールを導入する

2012-06-23

WordPressのモジュールWelcartにイプシロン決済モジュールを導入した時の覚書

まずは決済モジュールのあるディレクトリーの場所変更(アップグレード対策)

元のパス wordpressの置いてあるパス/wp-content/plugins/usc-e-shop/settlement/

からアップグレードに影響されない場所 wordpressの置いてあるパス/wp-content/settlement/に移動

次に管理画面のシステム設定の決済モジュールパスを先ほど設置したwordpressの置いてあるパス/wp-content/settlement/に変更

決済モジュールパス変更

 

次にwordpressの置いてあるパス/wp-content/settlement/内のをテキepsilon_sample_ja.phpストエディターで開き

38行目付近の

// 契約番号(8桁) オンライン登録時に発行された契約番号を入力してください。
$contract_code = “00000000”;

を自分の契約コードに書き換える。

書き換えたものをepsilon.phpにリネームして同じ場所へアップロード。

次にイプシロンの管理画面を開き

イプシロン

設定>決済システムの接続設定を選択します。

決済システムの接続設定ではまずはテスト環境を選択して運用前に必ずテストしましょう。

テスト環境画面が開いたら先ほどと同じように、設定>決済システムの接続設定を選択します。

イプシロン管理画面テスト環境

次に1~5までを設定します。

  1. オーダー情報発信元ホスト情報: 自分のホスト情報を登録します。
  2. 決済完了後のリダイレクト先:ショップトップページのURL
  3. [戻る]ボタンの戻り先URL:ショップトップページのURL/index.php?page_id=カートページのID&confirm=0
  4. エラー発生時の戻り先URL:ショップトップページのURL/index.php?page_id=カートページのID&acting=epsilon&acting_return=0
  5. タイムアウト情報送信先URL:ショップトップページのURL/index.php?page_id=カートページのID&acting=epsilon&acting_return=0

以上を登録したら。

welcartの管理画面に戻り、welcartの基本設定から支払い方法を追加しましょう。

支払い方追加

決済モジュール欄にはepsilon.phpと記述します。

次に一度ショップにアクセスしご自分でクレジット決済で買い物をしてみましょう。

正しく設定されていれば実際に買い物ができます。

正常に動作したら次は本番環境に先ほどと同じように設定をしていきます。

まずはepsilon.phpの50行目付近の

// インターフェイスURL(初期値はテスト環境用URL。本稼動の際は本番環境用URLに変更が必要。)
$interface_url = ‘https://beta.epsilon.jp/cgi-bin/order/receive_order3.cgi';

を本番環境用に書き換えます。

// インターフェイスURL(初期値はテスト環境用URL。本稼動の際は本番環境用URLに変更が必要。)
$interface_url = ‘https://secure.epsilon.jp/cgi-bin/order/receive_order3.cgi';

次にイプシロンの管理画面に行き先ほどと同じように必要事項を登録します。

イプシロン管理画面本番環境

ーで

きます情

  1. オーダー情報発信元ホスト情報: 自分のホスト情報を登録します。
  2. 決済完了後のリダイレクト先:ショップトップページのURL
  3. [戻る]ボタンの戻り先URL:ショップトップページのURL/index.php?page_id=カートページのID&confirm=0
  4. エラー発生時の戻り先URL:ショップトップページのURL/index.php?page_id=カートページのID&acting=epsilon&acting_return=0
  5. タイムアウト情報送信先URL:ショップトップページのURL/index.php?page_id=カートページのID&acting=epsilon&acting_return=0

以上で完了です。

報発信元ホスト情報せいじょ

カスタムフィールドの値にRSSのURLを登録し出力する方法

2012-06-19

まずはカスタムフィールドにRSSのURLを登録できるようにする。

設定>カスタムフィールドテンプレートから

テンプレートコンテンツ欄に


[rss]
type = text
size = 35
label = RSS

 

を追加

そして表示したいテンプレートに

<ul><?php  include_once(ABSPATH . WPINC . '/feed.php');$blog_rss2 =  get_post_meta($post->ID,"rss",true);$rss = fetch_feed($blog_rss2);  $maxitems = $rss->get_item_quantity(5);  $rss_items = $rss->get_items(0, $maxitems);  if ($maxitems == 0) :  ?>  <li><?php _e('データがありません。'); ?></li>  <?php else:    foreach($rss_items as $item) :  ?>  <li>    <?php echo $item->get_date('Y.m.d').'&nbsp;-&nbsp;'; ?><a href="<?php echo $item->get_permalink(); ?>" target="blank"><?php echo $item->get_title(); ?></a>  </li>  <?php    endforeach;  endif;?></ul>

を記述でOK

外部RSS表示カスタマイズ


SSHでWordPressインストール

2012-06-18
  1. wget http://ja.wordpress.org/wordpress-*.*-ja.tar.gz(*部分はバージョンによって異なります)
  2. tar xvf wordpress-*.*-ja.tar.gz -pで解凍
  3. rm -r  wordpress-*.*-ja.tar.gz  で削除

でファイルの展開は完了

  1. $ chown -R ユーザー名 ディレクトリ名で所有権変更

あとはブラウザにアクセスしてインストール!

 

 

今回構築したWordPressの覚書

2012-06-18

カスタマイズした個所や、方法、使用したプラグインなど忘れないように書き残しておきます。

Facebook