WordPressで新規ページを作る(動画)

WordPressとは

このサイトmiyasaka.infoや、SAKANA Magazineなど多くのサイトで僕が使っているのがオープンソースCMS、Wordpress。
CMSとは、Contents Management Systemのこと。
ページ作成やサイトの管理がとても簡単にできるシステムです。
世界中で使われているので、不具合があれば誰かが見つけ、すぐに対応されます。
「プラグイン」という機能追加が豊富に揃っているのもWordpressの特徴です。
では、実際に新規ページを作ってみましょう。

新規ページを作る

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-26-14-18-07

こちらがWordpressの管理画面。
「新規追加」でページの作成画面が開きます。
タイトルと本文を入力して、「プレビュー」をクリックすると。
ほら、こんな簡単にページができました。

リンクを設定する

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-26-14-18-27

他のサイトへリンクしたいテキストを選択して、「link」ボタンをクリック。
リンク先のURLを入れて「リンク追加」をクリック。
これでリンクが設定できました。

画像を入れる

画像を入れたい場所をクリックして、そこに画像をドラッグ&ドロップ。
これでページに画像が入りました。
ページの一番上に入る「アイキャッチ画像」も設定できます。

プラグインの「TablePress」でテーブルを作る

表組に使うhtmlの「table」タグ。
tr,td,テキスト、/td,/tr
・・・って、tableをhtmlで書くのってとても面倒ですよね。
Wordpressに色々な機能を追加できる「プラグイン」ですが、tableを簡単に作れる「TablePress」というものがあります。
これを使えば、Excelのような画面でtableタグを作成できます。

サイト名URL
miyasaka.infohttp://www.miyasaka.info/
SAKANA Magazinehttp://sakana.fish/magazine/

公開する

ページが出来上がったら、「公開」ボタンを押すだけ。
公開日時をタイマーで設定することもできます。
Webを見る人が多い朝や昼休みを狙って新規ページを公開する、ということもできます。

ソーシャルメディアに自動投稿

プラグインを使えば、ページの公開と同時にTwitterやFacebookにシェアすることもできます。

とっても便利、Wordpress

コンテンツサイトの運用において、大事なのは良いコンテンツを、たくさん作ること。
新規ページ作成やサイトの管理が面倒だと、コンテンツへ集中する時間を取られてしまいます。
Wordpressなら、コンテンツ作成に集中することができます。


WordPressでPDFのサムネイルをつくってくれるプラグイン、PDF Image Generator

PDF Image Generatorは、WordpressでPDFのサムネイル画像をつくってくれるプラグイン。

通常、Wordpressのメディア機能でアップロードしたPDFを投稿に追加すると、こんな感じになります。
5b172a20858c8e40cb5d001fb5de44da

PDF Image Generatorを使うと、こんな感じになります。

2016 Doodle フルーツゲームのサムネイル

自動的にサムネイル画像が作られて、リンク先はPDFになっています。

ただ単にPDFへのリンクを張っているだけのページってよくありますが、こんな感じにサムネイル画像があるだけで、一気にコンテンツサイト感が出てきて、いいじゃないですか。
まあ、飛び先はPDFですが・・・

スマフォでPDFを読んで、満足している人っているのかなあ?

詳細は作者のサイトへ。
PDF Image Generator : PDFのサムネイル画像を自動生成するプラグイン。

注意点

ご注意:このプラグインを有効化するにはサーバーにImageMagickとGhostScriptがインストールされている必要があります。またphpのexecコマンドが許可されているか、imagick APIがインストールされている必要があります。


WordPress投稿にソースを表示するプラグイン、Crayon Syntax Highlighter

Web系のBlogを書いていると、htmlやcss、jsのソースをサンプルとして表示したいことがよくあります。
そんな時に便利なのが、Crayon Syntax Highlighter。

プラグインのインストール

WordPressのプラグイン新規追加画面で、「Crayon Syntax Highlighter」を検索してインストールして、プラグインを有効化。

設定

WordPress管理画面で、設定ーCrayonを選択。
テーマやフォント、ツールバーなどの設定ができます。

スクリーンショット 2016-08-08 12.41.48

記述方法

<pre>でソースを囲むと、こんな感じで表示されます。

投稿画面のcrayonボタン

preで囲むだけじゃなく、いろいろカスタマイズしたい時は、投稿画面に追加されている「crayon」ボタンをクリック。
色々細かな表示設定を変更できます。
スクリーンショット 2016-08-08 12.52.54

ツールバー

ツールバーは、左から

  • 行番号非表示切り替え
  • 素のコード表示切り替え
  • ワードラップ表示の切り替え
  • コピペ用全選択
  • 別画面でソース表示

となっています。


サイトを公開した直後にリファラスパム

本日、クレジットカード倶楽部というサイトを立ち上げました。
アフィリエイト目的ではなく、クレジットカードユーザーに本当に役にたつ情報を発信するメディアを目指していきます。
SAKANA Magazineとともに、よろしくお願いいたします。

さて、このクレジットカード倶楽部を公開して、sitemap.xmlをgoogleに送った数分後。
Google Analyticsのテストのためにリアルタイム計測を確認したところ、すでにリファラスパムがやってきていました。
Googleのインデキシングのスピードも速いけど、リファラスパムの対応速度もものすごいですねえ・・・
スクリーンショット 2016-03-24 18.04.40


WordPressのプラグインがSSLでエラーを出すので修正

以前紹介したWordpressプラグインScroll to Topが、SSLでエラーを出していた。

エラー内容は以下の通り。
Mixed Content: The page at ‘https://www.hoge.com/’ was loaded over HTTPS, but requested an insecure script ‘http://www.hoge.com/wp-content/plugins/scroll-to-top/js/stt.js?ver=1.0′. This request has been blocked; the content must be served over HTTPS.

プラグイン用のJSが、http://から呼ばれているためにブロックされている。

WordPressが吐いたソースを見ても
<script type=’text/javascript’ src=’http://www.hoge.com//wp-content/plugins/scroll-to-top/js/stt.js?ver=1.0’>
となっている。
そりゃーブロックされますよね。

修正するには、/wp/wp-content/plugins/scroll-to-top/stt.phpを修正する。

元のソース

wp_enqueue_script(‘stt’, WP_PLUGIN_URL . ‘/scroll-to-top/js/stt.js’, array(‘jquery’), ‘1.0’ );


修正後

wp_enqueue_script(‘stt’, plugins_url() . ‘/scroll-to-top/js/stt.js’, array(‘jquery’), ‘1.0’ );

WP_CONTENT_URLやWP_PLUGIN_URLは、Wordpressの管理画面で設定されたURLを読むだけなので、SSLを自動認識しない。
site_url()やplugins_url()を使わないとダメ、ってことですね。

JSやCSSを追加する系プラグインは、同じ様な方法で修正できるんじゃないかと思います。


WP Social Bookmarking Lightに「メールで送る」ボタンをつけたい

WP Social Bookmarking LightはTwitter、Facebook、Line、Google +など、多くのソーシャルメディアシェアボタンを簡単にWordpressに追加できる。
しかし、「メールで送る」ボタン機能がないので、簡単に作ってみた。

仕様として、WP Social Bookmarking Lightのclass、.wp_social_bookmarking_lightの中の、最後にjQueryのaddpentToで追加するように作っている。

jQuery(document).ready(function($) {
var pageTitle = document.title;
var pageUrl = location.href;
var shareText =’ここにメール本文に書きたいテキストを書く%0d%0a%0d%0a’;
jQuery(‘<div class=”wsbl_mail”><a href=”mailto:?subject=’ + pageTitle + ‘&body=’ + shareText + pageUrl + ‘”><img src=”/wp-content/uploads/2016/02/mailto.jpg” alt=”メールで送る” width=”88″ height=”22″></a></div>’).appendTo(‘.wp_social_bookmarking_light’);

メールで送るボタンのサンプルはこんな感じで。
mailto


WP Social Bookmarking Lightでカテゴリ一覧ページにソーシャルボタンが表示されない場合

WordPressにソーシャルボタンを追加するプラグイン、WP Social Bookmarking Light。

カテゴリ一覧などWordpressが自動生成するページにもソーシャルボタンを追加するためには、設定画面の「個別記事のみ」を「No」にすればいい。
スクリーンショット 2016-02-10 12.20.38

しかし、なぜかうまく表示できない・・・というときは、archive.phpにWP Social Bookmarking Light表示用のコードを追加しちゃいましょう。

場所的には、以下のようにhave_posts()のwhileループの下、item-wrapの閉じタグの上あたりがいいんじゃないかと思います。

  <?php
wp_social_bookmarking_light_output_e();
?>
</div><!– .item-wrap –>
</div><!– .archive-wrap –>


WordPressをソーシャルシェア

WordPressのプラグイン、WP Social Bookmarking LightとAll in One SEOを使った方法の紹介です。

WP Social Bookmarking Lightの設定

「WP Social Bookmarking Light」をインストールして、設定画面からお好きなソーシャルメディアを右から左にドラッグしましょう。
ここではFacebook、Twitter、LINEを設定してみました。
スクリーンショット 2016-01-15 17.05.42

All in One SEOの設定

トップページや、各投稿毎にシェア画像を設定するのに、今回はWordpressプラグイン「All in One SEO」を使います。
「All in One SEO」をインストール。
スクリーンショット 2016-01-15 16.25.27
All in One SEOの「Feature Manager」から、「Social Meta」の「Activate」ボタンを押す。
スクリーンショット 2016-01-15 16.27.40
All in One SEOの「Social Meta」をクリック。
スクリーンショット 2016-01-15 16.28.15

トップページのシェア画像設定

まずはHome Page Settingsの各項目を設定。これでトップページのシェア設定ができます。
スクリーンショット 2016-01-15 16.37.03
とりあえず、ここではog:imageだけ設定しておきます。
・「Home Image」の「Upload Image」をクリックし、新規画像を追加する
・同じく「Home Image」の「Upload Image」で、メディアにアップロードされているファイルを選ぶ
・画像のURLを直接指定する
などの方法で設定可能です。

個別ページのシェア画像設定

1.「All in One SEO」の「Image SettingsーSelect OG:Image Source」から設定する方法
・Default Image:個別ページ共通で、同じ画像を使う
・アイキャッチ画像:個別ページに設定されたアイキャッチ画像を使う
・Image From Custom Field:カスタムフィールドで設定した画像を使う
などが選べます。
スクリーンショット 2016-01-15 16.47.04
2.個別ページのAll in One SEO設定する方法
投稿の下部にある「All in One SEO Pack」の「Social Settings」タブで、Custom Imageを設定します。
スクリーンショット 2016-01-15 17.00.46


本番とステージングでGoogle Analyticsのトラッキングコードを自動で出し分ける(WordPress)

ステージング(開発環境)サーバーでと、本番(商用環境)のサーバーと、同じGoogle Analyticsプロパティを設定してしまうと、本番データにノイズが入る。
だからといって別プロパティにすると、アップロードのミスで「本番にステージングのトラッキングコードをアップしてしまった」というミスも発生しがち。
そんな時は、funcitions.phpで出し分けると良い。

以下の例は、本番のドメインがwww.hoge.jpで、本番のトラッキングコードがUA-xxxxxxxx-1、ステージングがUA-xxxxxxxx-2の場合。

function wp_google_analytics(){
$domain=$_SERVER[‘SERVER_NAME’];
if ($domain == ‘www.hoge.jp’){
$ua=’UA-xxxxxxxx-1′;
}else{
$ua=’UA-xxxxxxxx-2′;
}
?>
<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);
ga(‘create’, ‘<?php echo $ua;?>’, ‘auto’);
ga(‘send’, ‘pageview’);
</script>
<?php }
add_action(‘wp_head’, ‘wp_google_analytics’);


WordPress+jQueryでイベントトラッキング

WordPressで作ったサイトのヘッダやフッタなどのリンクを、jQueryを使ってGoogle Analyticsのイベントトラッキングをする方法。

header.php、footer.phpの該当箇所にidを振る。

header.php

<li class=”header-nav-listitem”><a id =”header_link” href=”/hoge_page/” >hoge</a></li>

footer.php

<li class=”footer-listitem”><a id =”footer_link” href=”/hoge_page/ “>hoge</a></li>

functions.phpにjqueryを書く。

 function wp_event_tracking(){ ?>
<script>
jQuery(function () {
jQuery(“#header_link”).click(function () {
ga(‘send’, ‘event’, ‘hoge’, ‘click’, ‘header_hoge_’+location.pathname);
});
jQuery(“#footer_link”).click(function () {
ga(‘send’, ‘event’, ‘hoge’, ‘click’, ‘footer_hoge_’+location.pathname);
});
});
</script>
<?php }
add_action(‘wp_head’ , ‘wp_event_tracking’);

これでイベントトラッキングには
カテゴリ:hoge
アクション:click
ラベル:以下の通り

ヘッダ:header_hoge_ページ名
 例:hader_hoge_/hoge_page/
フッタ:footer_hoge_ページ名
 例:footer_hoge_/hoge_page/
みたいな感じで計測される。
(/が入るのがイヤとかだったらreplace()してください。)

これで、どのページのヘッダ、フッタから「hoge_page」へのリンクがクリックされたかが計測できる。
新規ページを作ってもOKなので、運用上のミスも発生しない。