カテゴリー: Wordpress

WordPressとは

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

新規ページを作る

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

リンクを設定する

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

画像を入れる

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

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

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

公開する

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

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

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

とっても便利、Wordpress

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

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

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

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

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

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

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

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

注意点

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

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

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

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

設定

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

記述方法

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

投稿画面のcrayonボタン

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

ツールバー

ツールバーは、左から

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

となっています。

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

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

以前紹介した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は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’);

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