VCCW(Vagrant+VirtualBox+Chef+WordPress)のメール送信テスト環境には、MailCatcherが最適!

ローカルの WordPress の開発環境を用意するのであれば、VCCW - A WordPress development environment.を使用しましょう。Vagrant と VirtualBox さえあれば、なんでもそろった無償の開発環境を迅速に構築できます。VCCW の構築方法については、gulp.js と Browser Sync で快適な WordPress 開発環境を手に入れるをご参照ください。 VCCW の開発環境でメー...

Mac WordPress Development

WordPressのショートコード入門

WordPress のショートコードとは、いわゆる「ショートカット」のように機能します。たとえば、代表的なショートコードとして[[gallery]]がありますが、これは記事中に[[gallery]]と記述することで、簡単にイメージファイルのサムネイルを呼び出すことができるものです。今回は、ショートコードの作り方から、...

Blog Development WordPress

MarsEditのプレビュー画面にWordPressのショートコードをリアルタイムに反映する

Mac で WordPress を使ってブログを書くなら使いたい「MarsEdit」、弊サイトでも、度々その使い方についてご紹介してきました。過去記事については、MarsEdit のプレビュー画面で、「highlight.js」のシンタックスハイライトをリアルタイムでプレビューする、WordPress のテーマ開発、ブログの執筆...

Mac WordPress Development MarsEdit

MarsEditのプレビュー画面で、「highlight.js」のシンタックスハイライトをリアルタイムでプレビューする

MarsEditは、macOSで動作するWordPressやMovableTypeなどの主要なCMSに対応しているエディターで、とくにリアルタイムプレビューやAppleScriptとの連携は非常に便利です。 弊サイトでも、過去にMarsEditをより便利に高速に活用するためのスクリプト集や、Alfre...

Mac Development MarsEdit WordPress

WordPress開発のためにAtomに導入しておきたい最低限のプラグイン8選

GitHub謹製のエディター「Atom」、バージョンアップによる機能追加、バグ修正を重ね、「Sublime Text」と並ぶくらいに多機能で使いやすいエディターです。どちらを使用するかは好みが分かれますが、「Atom」は「Sublime Text」と比較しGUIが充実しているなど、優れている点も多いです...

Mac Atom Development WordPress

WordPressの過去記事参照に!Alfredから記事を検索してMarsEditに貼り付けられる「Paste link for MarsEdit with Alfred」

MarsEditでブログを執筆している時に、過去の投稿のリンクを貼りたくなる時はありませんか?記事のタイトルを見ながら絞り込みのできる「Paste link for MarsEdit with Alfred」なら、そんなあなたのお悩みを一発で解消できます。 使い方 「Paste link for MarsEdit with Alfred」は、AlfredのWorkflow機能を使用...

Mac WordPress Alfred Apps

Webデザイナー必見!CSS3のブラウザの対応状況をコマンドラインで確認できる「caniuse-cmd」

Can I use... Support tables for HTML5, CSS3, etcといえば、CSS3やHTML5のブラウザの対応状況をブラウザで教えてくれる便利なツールですが、コマンドラインで確認できるツールが登場したのでご紹介します。 HTML5、CSS3のブラウザの対応状況をCUIで調査! インストールは、「npm」コマンドにより行います。 $ npm install -g caniuse-cmd 「npm...

Mac WordPress Development

Windows環境で超簡単にWordPressの開発環境を構築する方法

WindowsでWordPress環境を構築するのは簡単ではありません。たとえば、最低限、以下のような手順を踏む必要があるでしょう。 XAMPP Installers and Downloads for Apache FriendsからXAMPPをダウンロードする XAMPPをインストールする 必要に応じてXAMPPの環境をカスタマイズする WordPress › Blog Tool, Publishing Platform, and CMSからWordPr...

Windows WordPress Development

WordPressでプラグインを使わずに閲覧数の多い人気記事を取得し、管理画面に閲覧数を表示する

WordPress で閲覧数の多い人気記事を表示するプラグインは数多くありますが、今回はプラグインの力を借りずに自力で実装してみたいと思います。 そもそも、データベースを有する WordPress において、なぜ簡単に閲覧数の多い記事を表示することができないか。それは、WordPress のデータベースには、閲覧数を保持するカラムがないから...

Blog Development WordPress

今からでも遅くない!今日から始めるEmmet入門

Emmet Emmetとは、HTML、CSSを高速に記述、編集できるエディター系プラグインです。何だか敷居が高いな、と思われている方もいらっしゃるかもしれませんが、やってみれば意外と簡単、むしろ超便利!ということに気付きます。ぜひチャレンジしてみてましょう。 下準備 今回使用するエディターは、Sublime Tex...

Mac Development WordPress

jQueryのプラグイン「Sharrre」を使用してWordPressにソーシャルネットワークのシェア数を非同期で取得する

ソーシャルネットワークのシェア数をカウントする jQuery のプラグインはさまざまですが、今回はあの世界的に有名なMashableでも使用されているという噂の、Sharrre - A plugin for sharing buttonsを使用してみました。 前述の Mashable のように、記事毎のトータルのシェア数を表示し、シェア数にマウスカーソルを合わせると、各...

Blog Development WordPress

WordPressのサイト表示速度を高速化させるために行っている施策まとめ

あなたのサイトの表示速度を向上するためのTipsをいくつかご紹介します。すべて弊サイトで実際に行っている施策ばかりです。サイトの表示速度は、SEOにとっても重要な要素です。ぜひ挑戦してみてください。 WordPressアップロード前の下準備 画像ファイルの圧縮 WordPressに限らず、Webサイト表示...

Blog Development WordPress

本番環境と開発環境のWordPressを自動的に同期する方法

本番環境と開発環境のWordPressの環境を同期する方法をご紹介します。常に、本番環境と開発環境のWordPressの情報を同期化しておくことで、開発がスムーズになることが考えられます。初期設定が少々面倒ですが、是非試してみてください。 本番環境と開発環境のWordPressを同期する 順を追って、方...

Blog Development WordPress

jQueryを使用してTwitter、Facebook、Google+、はてなブックマークのシェア数を非同期で取得する方法のまとめ

プラグインを使用せずにソーシャルネットワークからシェア数を取得する方法のサンプルです。WordPress にはさまざまなプラグインが用意されており、また公式ボタンを使用した方がより設置が簡単なのですが、jQuery の勉強も兼ねて自力で作成してみました。 サンプル サンプルをご用意しました。サンプルについて...

Blog Development WordPress

今日からコピペで使えるWordPressで人気記事や最新記事を取得する方法のまとめ

WordPress ではさまざまな方法で投稿を取得できます。今回は、その中でもよく使われる手法についてまとめました。なお、簡略化のため、説明は WP_Query に渡すパラメーターのみとし、特段の注意点がなければ前後の処理は省いています。大まかな処理の流れは以下の通りになりますので参考にしてください。 $r = new WP_Query(); if ( $r->have_posts() ) { while ( $r->have_posts() ) : the_post(); // do...

Blog Development WordPress

Twitter Bootstrap 3を用いてWordPressテーマを作成しよう③

Twitter Bootstrap 3を用いてWordPressテーマを作成しよう②は、Twitter Bootstrapの根幹となるグリッドシステムのご紹介から、メインコンテンツにアイキャッチ画像、タイトル、投稿の内容を表示させる、など盛りだくさんの内容でした また、その中で、the_XXXX() 関数とget_the_XXXXX()...

Blog Development WordPress

Twitter Bootstrap 3を用いてWordPressテーマを作成しよう②

Twitter Bootstrap 3 を用いて WordPress テーマを作成しよう ①までで、Initializrを使用したプロトタイプの作成から、ヘッダー、フッターの分割までを行いました。今回は、メインとなる投稿一覧の表示部分をカスタマイズしていきたいと思います。前回の記事をまだご覧になっていない方はそちらからご覧ください。 Twitter Bootstrap のグリッドシステム...

Blog Development WordPress

Twitter Bootstrap 3を用いてWordPressテーマを作成しよう①

Twitter Bootstrapを用いたWordPressテーマは数多く配信されています。その中からピックアップしてカスタマイズしても良いのですが、それでは面白味がありませんので、極力そういった類いのツールは借りず、自作に近い形でテーマを作成したいと思います。 簡単にレスポンシブに対応したデザインが作成できる「I...

Blog Development WordPress

Google Analyticsと連携してページビューの多い人気記事を表示する

WordPress の人気記事を取得する手段は数多くあれど、信頼性の高い数値はやはり Google Analytics。そこで、今回は公開されている API を利用して、Google Analytics からページビューを取得する方法をご紹介します。 Google Analytics と連携して PV を取得する 多少敷居が高いと感じるかもしれませんが、さほど難しい話ではありません。順を追って解説...

Blog Development Google WordPress