カテゴリー別アーカイブ: 保方

WordPressに無料アクセス解析 Google Analyticsを導入する方法

WordPressに、無料アクセス解析 Google Analyticsを導入する方法として、プラグインを使用する方法、テーマフォルダにある header.php へトラッキングコードを記述する方法、function.php にトラッキングコードを設置する方法の3つが考えられます。

いずれの方法によっても、まず、Googleアカウントを取得したのち、Googleアナリティクスの公式ウェブサイトで、Analyticsの申し込みをしておく必要があります。
1.プラグインを使用する方法

Google Analytics for WordPress などのプラグインを使用すると、テンプレートファイルを編集することなく、アナリティクスを導入することができます。

プラグインをインストールした後に有効化し、Googleアナリティクスの公式ウェブサイトで取得した Account IDを、プラグインの設定画面で入力するだけで、そのWordPress全ページにトラッキングコードが自動的に埋め込まれますので、HTMLやPHPに詳しくない方でも、手軽に導入することができます。
2.テーマフォルダにある header.php へトラッキングコードを記述する方法

有効化されているテーマの header.php の</head>の直前に、Googleアナリティクスの公式ウェブサイトで発行されたトラッキングコードを貼り付けます。

header.php は、管理ページの外観>テーマ編集でも編集することが可能です。

 

3.functions.php にトラッキングコードを設置する方法

functions.phpの任意の場所に、Google Analyticsコードを読み込ませる関数を追加します。

function wp_google_analytics(){ ?>
 <!--Google Analyticsのトラッキングコードを貼り付ける。-->
<?php }
add_action('wp_head', 'wp_google_analytics');

サイトをブラウザで開き、ソースを表示すると、<head></head> 間にトラッキングコードが挿入されたことが確認できます。

使用中のWordPressのバージョンを調べる方法

使用したいプラグインの対応状況やサーバー環境などにより、WordPressのバージョンを調べる必要があるときがあります。
現在使用しているWordPressのバージョンはどれなのか、気になった時に調べる方法です。

・ダッシュボードを見る

バージョン3.xでは、管理ページ>ダッシュボードで「現在の状況」の欄に、
「WordPress 3.6.1 を使用中。 」
といった形で使用中のWordPressのバージョンが表示されます。

管理ページで「現在の状況」の欄が表示されていない場合は、右上の「表示オプション」をクリックし、「現在の状況」にチェックを入れると表示されます。
・version.php を見る

FTPソフトなどで wp-include フォルダの中の version.php をダウンロードし、テキストエディタ等で開きます。
$wp_verion = ’3.6.1′
といった形で使用中のWordPressのバージョンが表示されます。
・テンプレートタグで調べる

任意の場所に

<?php bloginfo('version'); ?>

と記述して、バージョンを表示させます。
・ブラウザでソースを表示する

ブラウザでWordPressでつくったサイトの任意のページを開き、ソースを表示します。
<head></head>間に、以下のような形でバージョンが表示されます。

<meta name="generator" content="WordPress 3.6.1" />

WordPressに便利な機能を追加してくれる「プラグイン」

WordPressには、本体にもともと供えられている機能の他に、目的に応じて便利な機能を追加することができる「プラグイン」というものを追加することができます。

プラグインを追加するには、まず、管理画面でプラグイン>新規追加をクリックし、表示された検索ボックスにプラグインの名前を入力して検索します。

検索結果に目的のプラグインが表示されたら、「いますぐインストール」をクリックすると、プラグインのファイルが自分のサーバーにコピーされます。

続いて表示される画面で「プラグインを有効化」をクリックすると、そのプラグインが使用できるようになります。

プラグインを探す時は、googleなどの検索サイトで「プラグイン おすすめ」等で検索すると、便利なプラグインが紹介されたサイトがたくさんでてきます。

プラグインをインストールする際には、そのプラグインの最終更新日が現在に近いか、つまり開発が継続されているかどうかを確認しましょう。

WordPress3.5でカスタムフィールドが進化した!?

従来、Wordpressでカスタムフィールドの値を取得するには、以下の様な関数を使用していました。

<?php echo get_post_meta($post->ID,'メタキー',true) ; ?>

ところが、WordPress3.5以降では、次のようなシンプルな記述でカスタムフィールドの値が取得できるようになっていました。

<?php echo $post->メタキー ; ?>

この書き方は、サードパーティ製のプラグイン「Custom Fields Template 」を使用している場合にも使えるようです。

さらに、複数のループを作成する際に使用する get_posts()で「meta_query」というパラメータを使用して、カスタムフィールドの値で取得する記事に絞込をかけることもできるようです。

例えば、記事を表示するか否かを指定する「is_show」というカスタムフィールド、及び開催日を指定する「startdate」というカスタムフィールドが登録されていた場合において、開催日が今日以降で表示する記事の取得が、以下の様なコードにによって可能となります。

//今日の日付を取得
$today = date('Ymd');
//条件
$args = array(
 'meta_query' => array(
 'relation' => 'AND',
 // 'is_show' が '1' のとき
 array(
 'key' => 'is_show',
 'value' => '1',
 ),
 // 'startdate' が今日以降
 array(
 'key' => 'startdate',
 'value' => $today,
 'compare' => '>=',
 'type' => 'NUMERIC'
 ),
 ),
);
// 条件を満たす投稿を取得
$myposts = get_posts($args);

スマートフォン向けサイトの電話発信用のリンク

スマートフォンには多くの機種で、電話番号のように見える文字列に対し、自動的にすぐに電話がかけられるようなリンクを付けてくれる機能があります。

しかし、その機能によって、例えば郵便番号などにまで同様のリンクが付けられてしまうことも多々あります。

このようなリンクが自動的につかないようにするには、<head></head>間に以下のように記述します。

<meta name="format-detection" content="telephome=no">

さらに、電話番号に手動でリンクを貼るには、以下のように記述します。

<a href="tel:0000000000">00-0000-0000</a>

背景画像のサイズ指定は background-size(CSS3)

PC、タブレット、スマートフォンなど、画面の解像度の異なる機器に適したサイト表示をする、いわゆるレスポンシブWEBデザインでは、そのサイズに合わせて背景画像のサイズを自動的に変更させたい場合があります。

そんなときは、CSS3の background-size が便利。背景画像の表示サイズをcssで指定することができるため、1枚の画像を様々な大きさで表示できるようになります。
background-size: auto; サイズを自動検出
background-size: 50px 50px; 縦横指定したサイズ
background-size: 50% 50%; 表示領域に対して縦横指定した割合
background-size: cover; 表示領域をすべて埋め尽くす大きさ
ackground-size: contain; 縦横比を保持したまま表示領域に背景画像を全て表示

□使用例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-sizeのサンプル</title>
<style>
p{
 width:400px;
 height:300px;
 background: url(./testimage.jpg) #cccccc;
}
#ex1{
 background-size:contain;
}
#ex2{
 background-size:cover;
}
#ex3{
 background-size:50px auto;
}
#ex4{
 background-size:100% 100%;
}
</style>
</head>
<body>
<p id="ex1">contain</p>
<p id="ex2">cover</p>
<p id="ex3">50px auto</p>
<p id="ex4">100% 100%</p>
</body>
</html>

 

ただし、古いブラウザでは対応していないものがありますので、注意が必要です。

GoogleChromでスマートフォンサイトの表示確認

スマートフォンサイトを作成する際、パソコン上で表示を確認する方法はいくつかありますが、そのひとつとしてGoogle Chromeのデベロッパ-ツールを使用する方法をご紹介します。

Chromで表示を確認したいページを開き、そのページ内の任意の場所で右クリックして要素を検証をクリックし、デベロッパーツールを開きます。
(Ctrl + Shift + Iでもデベロッパーツールが開きます。)

4

画面右下のギアのようなマークをクリックします。

3

開いたパネルで User Agent にチェックをいれ、ドロップダウンリストでiPhone-iOS5 や Android2.3など、表示を確認したい端末を選択します。

2

さらに、Device metrics にチェックをいれ、Screen resolution で解像度を指定すると、指定した幅や高さでページが表示されるようになります。

 

文字列からHTML および PHP タグを取り除く strip_tags

WordPressでオリジナルテーマを作成していると、テンプレートタグで取得した値かたら、HTML や PHP のタグを取り除いて表示させたい場合があります。

そんな時は、phpの関数、「strip_tags($str)」が便利です。

たとえば、WordPressで構築されたサイトで、パンくずリストで「TOP &gt; 記事のタイトル」のように表示するために、「the_title()」を使用したとき。

タイトルを2行にするため、タイトル中に&lt;br /&gt;が入れられているとパンくずリストの中の記事のタイトル部分もされてしまいます。

the_title()の場合は値が表示されてしまいますので、get_the_title()で値を取得し、取得した値をstrip_tagsに渡しましょう。

<?php echo strip_tags(get_the_title()); ?>

WordPressサイトのスマホ最適化方法

WordPressサイトのスマホ最適化方法として、以下の3つのパターンが考えられます。

1. スマホ最適化プラグインで自動的に対

有名なプラグイン
・WPtouch
・WPtap News Press

上記のプラグインを入れるだけで、スマホでの閲覧に適した表示がされるようになります。スマホサイトを自由にカスタマイズしたい場合には不向きと思われます。

2. テーマをレスポンシブデザインにする

主にCSSの設定により、どんな解像度の端末にも対応できるような、幅等が可変のテーマを作成します。

一つのテーマで携帯、スマホ、タブレット、パソコンに対応させるため、サイト更新時などのメンテナンスが楽になりますが、開発時には様々な配慮が要求されるため時間がかかります。

また、高解像度の画像を使用するとモバイル端末などで重くなり、低解像度の画像を使用すると、高解像度のディスプレイで閲覧した時に画質が落ちることになります。

3. ユーザーエージェントを取得しテーマを切り替える

3-1 function.phpでユーザーエージェントを判別する関数を作成し、ひとつのテーマの中で条件分岐により表示するものを切り替える。

共通して使用出来る部分は単一の記述で、画像や表など変更が必要な部分のみ条件分岐を使用してかき分けるため、テーマを複数作成する場合とくらべメンテナンスは楽ですが、テーマ内のテンプレートファイルの記述が複雑になります。
3-2 PC用のテーマとスマートフォン用のテーマをそれぞれ準備し、プラグインでテーマを切り替える。

有名なプラグイン
・Any Mobile Theme Switcher
・Multi Device Switcher
・iPhone theme switcher
・WordPress theme switcher
・WP Mobile Detector

(「WPtap Mobile Detector」もよく使用されているようですが、対応するWordpressの最新バージョンが2.9.4とされていました。)

WordPressのカスタムフィールドで情報入力

カスタムフィールドを使用すると、WordPressの投稿フォームに「タイトル」と「本文」以外に、フィールドを自由に追加することができるようになります。

商品を扱うサイトでは「商品番号」「価格」「色」など、施工実績を紹介するページでは「完成日」「場所」など、旅行記のサイトでは「目的地」「天気」などのフィールドを追加すれば、Webサイトの決まった位置にそれらの情報を簡単に表示することができるようになります。

カスタムフィールドの入力は、「投稿」や「固定ページ」の「編集」の画面から行います。

名称未設定-1

左側にカスタムフィールドの名前(項目)、右側に値を入れ、「カスタムフィールドを追加」ボタンを押すと、その記事にカスタムフィールドが追加されます。