はてなブックマーク

僕はWordPressのローカル環境（開発環境）はLocal by Flywheelというツールをツールを使っています。 これまで、データの同期はAll In One WP Migrationというプラグインでやっていましたが、いい加減面倒になってきたので、WordMoveを使ってコマンドでサクッとデータ(DB)や画像ファイルをローカルにコピーする環境を整えました！ WordMoveとは… ローカルにインストールしてあるWordPressとサーバー上のWordPressのDBや画像、プラグイン、テーマファイルをダウンロード/アップロードして同期ができるツールです。 本番とローカルを完全に同期するわけではなく、アップロード(push)だけするとか、ダウンロード(pull)だけするといった一方向だけでの利用もできます。 また、設定ファイルに除外するファイルを書いておくことで、同期したくないプラ

最近はWebサイト上でチャットを使ってお問い合わせができるサイトが増えてきました。 メールでのお問い合わせとは違い、リアルタイムでお客様の質問に答えられる点にメリットを感じる方も多いでしょう。 チャット機能を実現するサービスは様々ありLINE公式アカウントとの連携など、多種多様なサービスが展開され費用もさまざまです… 今回は「Smallchat」というサービスを使ってみたので、導入の方法やメリット・デメリットなどを紹介します。 Slackと連携してチャット機能をホームページに追加できる「Smallchat」 今回試してみた「Smallchat」はSlackと連携してホームページにチャット機能を追加できるサービスです。 特に嬉しい点は無料でもメッセージ数・ユーザー数が無制限という部分で、1チャンネルで足りるサポートであれば無料で運用できます。 デメリットとしては必ずSlackを使う必要がある

ちょっと難しそうなGutenbergのブロックカスタマイズ。 既存のブロックにちょこっとスタイルを追加するだけなら意外と簡単だということに気づきました。 そこで、練習も兼ねてボタンブロックに独自のスタイルを追加して、「アイコン付きのボタン」を追加してみます！ WordPress標準のブロックをカスタマイズしてみる Gutenbergのブロック開発はこれまでのPHPカスタマイズと違い、JavaScriptを書くことになり、開発環境を整えるだけでも大変そうなイメージを持っていました… ですが、いざチュートリアルを見てみると、頑張って開発環境を用意しなくてもカスタマイズできそうなことがあったので紹介したいと思います。 ちなみにチュートリアルはこちら▼

どうやって使うのかな？と軽く調べてみたところ… カスタムフィールドを定義する配列で使える項目はまとめるのが面倒なので…プラグインのコードを直接確認してみてください（/plugins/smart-custom-fields/classes/fields/*） という、わかりみしかない1文が書いてあったので、コードを眺めて自分でまとめてみたいと思います。 Smart Custom Fieldsの設定項目を追加する 編集項目が表示される部分（メタボックス）の追加 まずはSmart Custom Fieldsで入力域の大枠を追加する部分です。 /** * カスタムフィールドを定義 * * @param array $settings MW_WP_Form_Setting オブジェクトの配列 * @param string $type 投稿タイプ or ロール * @param int $id 投稿

ダウンロードページのリンクをクリックします。 ダウンロードにはアカウントが必要なので、ログインしてダウンロード。 アカウントがなければ新規登録しましょう。 ファイルがダウンロードできたらインストール作業を進めます。 ダウンロードしたdmgファイルを実行し、表示されたクジラさんをドラッグ＆ドロップ アプリケーションにDocker.appが追加されるので実行します。 途中Macのパスワードを訊かれながらインストール作業を進めます。 無事インストールが完了すればクジラアイコンが表示されるようになります。 ひとまずここまででDocker for Macをダウンロード・インストールは完了です。 サンプルを使ってWordPressサイトを作る Docker for Macがインストールできたら、サンプルのdocker-compose.ymlを使ってサイトを立ててみます。 サンプルはこちら▼ 適当な場所

テストコードの書き方 まずはテストコードの書き方 一番簡単なのはWP-CLIを使って作ったサンプルのテストコードをコピーして作るのが楽です サンプルコードはこんな感じ /** * Sample test case. */ class SampleTest extends WP_UnitTestCase { /** * A single example test. */ function test_sample() { // Replace this with some actual testing code. $this->assertTrue( true ); } } テストコードのファイル名、関数の書き方 実行するテストのコードが書かれたファイルはtest-xxxxx.phpのようなtest-から始まる名前で作成します テストコードはWP_UnitTestCaseを継承したクラスの中に

「特定の固定ページだけデザインを変えたい」という場合、スラッグが決まっていたり、既に投稿があれば「page-{slug}.php」や「page-{ID}.php」を作って対応できます。 ですが、まだそれらがはっきり決まっていないときや、ユーザーがある程度変更出来るようにしたいときには管理画面からテンプレートを変更できると便利ですよね。 ということで、今回はカスタムページテンプレートを作成して、管理画面から固定ページのテンプレートを変更出来るようにする方法です。 カスタムページテンプレートを作成して、管理画面から変更する よっひー(@yosiakatsuki)です。 「page-{slug}.php」や「page-{ID}.php」を作成すれば特定の固定ページだけデザインを変えることができます。 ただ、それだと「そのページ以外でも同じデザインで表示したい…」といった時に不便なんですよね… わ

先日乗り換えたVisual Studio Codeで少し迷った1つのウィンドウで複数のフォルダを開く方法と、Project Managerで複数ファイルをまとめてプロジェクトを開く方法のメモです 1つのウィンドウで複数のフォルダを開く方法 フォルダをVisual Studio Codeで開くと基本的には1つのウィンドウで1つのフォルダを開くようになりますが、ウィンドウ内で複数フォルダをまとめて開くことも可能です まずは1つフォルダを開いた状態で、メニューから「ワークスペースにフォルダを追加」を選びます 一緒に開きたいフォルダを選択すると、エクスプローラー内に2つフォルダが表示されました メニューから開くという手間がありますが、複数フォルダも問題なく開くことが出来ます 複数のフォルダを開いた状態を保存する 続いてはこの複数フォルダを開いた状態を保存し、後から呼び出せるようにします Visua

WordPressでホームページ開設・ブログを始める場合、レンタルサーバーを借りて独自ドメインを取得して運営することが多いかと思います。 今回は、「ムームードメイン」で取得したドメインを「エックスサーバー」で使うためのドメインの設定手順を紹介します。 まだドメイン取得が済んでいない場合はこちらを参考にしてみてください▼ ムームードメインで取得したドメインをエックスサーバーで使う方法 エックスサーバーにドメインを追加する 「ドメイン設定」メニューを開く まずはエックスサーバーのサーバーパネルからドメインの追加をしていきます。 サーバーパネルにログインしたら「ドメイン設定」をクリックします。 紐付けするドメイン名を入力する 「ドメイン設定追加」タブをクリックし、エックスサーバーと紐付け設定する「ドメイン名」を入力します。 ドメイン名は.comや.jpといった末尾の部分まで含めて入力しましょう。

ローカル環境でテーマカスタマイズをする際、できれば本番サイトと同じ記事データを使って確認したいですよね！ 今回は、「All-in-One WP Migration」というプラグインを使って超簡単に本番サイトをローカル環境にコピーする方法を紹介します！ ローカル環境にサーバー上のWordPressをコピーする Local by FlywheelやMAMPなどでローカル環境を簡単に用意できるようになり、PC上で動くWordPressを使って確認をしながらテーマのカスタマイズがやりやすくなりました。 ただ、テーマカスタマイズをする場合、できれば本番サイトと同じデータを使って見た目の確認をしたいですよね！ そのためには、サーバー上で動いている本番サイトのデータや画像一式をローカル環境にコピーする必要があります。 今回は「All-in-One WP Migration」というプラグインを使ってサーバ

「Contact Form 7」でフォームを設置していないページではJavaScriptとCSSを削除し、必要なページだけ読み込むようにして、Page Speed Insightsの点数アップをするカスタマイズ方法について紹介します。 Contact Form 7のJavaScript,CSSを停止する お問い合わせフォーム設置プラグインとして有名な「Contact Form 7」。 このプラグインを追加すると、フォームの動作に必要なJavaScriptやCSSが読み込まれるのですが、このCSSがPage Speed Insightsで指摘されます。 Page Speed Insightsで指摘があったのはCSSだけなのですが、JavaScriptも必要ないページでは読み込まないほうが表示高速化が図れるので合わせて停止していきます！ Contact Form 7のJavaScript,CS

JavaScriptを機能ごとに別々のファイルに分割、モジュール化して開発を進めたい時に必要になってくるモジュールバンドラー webpackはそのモジュールバンドラーの一種で、以前から単語は耳にしていたものの、開発環境の用意が億劫でなかなか手を出せませんでした… 今回、簡単なサンプルを作ってお勉強をしてみたので開発環境を含めてメモしておきます 「JavaScriptはjQueryとか検索しながらコピペでなんとか動くものを作れるくらいだけど、これからはイマドキなJSもいじれないとヤバイなぁ…」 …な方の参考になれば幸いです。 まずはwebpackだけの簡単なサンプルを作ってみる まずはwebpackだけでモジュール化したJavaScriptを1つのjsファイルにしてみます ※npmパッケージのインストール等は出来る前提で話を進めます プロジェクトの準備 まずはプロジェクトの準備をします。 今

Webページなので誰でも使えます！ ただ、スマホ対応はしていないので、PCから使ってみて下さい （ついでにIEなんかも対応してません…） 左がエディタ部分で、右がプレビューです こんな感じで投稿内容を書いていきます 「HTMLをコピー」ボタンを押すと、MarkdownからHTMLに変換した内容をクリップボードにコピーします あとは管理画面から新規投稿を作成して貼り付けて公開ボタンを押せば完了です！ このエディタの特徴 書いた内容を自動保存 このエディタ部分を実現しているJavaScriptライブラリのお陰で、書いたそばから入力内容をブラウザに保存してくれます うっかりブラウザを閉じても投稿内容が残っているので安心です ただ、何かの拍子に消えるかもしれないので過信しないで下さい オレオレ変換機能を搭載 markd.jsを使うと、見出し（hタグ）の変換でidが自動で付くのですが、日本語だとid

テーマやプラグインで作った機能の検証をvar_dumpで表示させたり、検証用の記事作っておいたりなど… 機能が多くなってくると毎回ブラウザで確認するのはなかなか大変です そうすると「ユニットテストテストで自動化したい！！」となってくるわけですが「(なんとなく)難しそう」と思ってしまい、なかなか手を付けられませんでした とは言え、いつまでも後回しにしていられないので、ひとまず環境整備まで進めた手順をメモしておきます WordPressでも自動テストしたい キーワード的には「ユニットテスト」「テスト自動化」「継続的インテグレーション」などでしょうか TravisCIなどで自動テストした結果をREADMEにバッジで表示させたりなども憧れます ですが、自動テストの話になるとなんとなく難しそうだし「テストどうやって書くんだ問題」もあるのですが、ひとまず環境整備部分まで進めてみます 開発環境の準備 自

WordPressテーマのカスタマイズなどをサーバーで動いているサイト上で行うと、失敗した時「ページが真っ白。頭も真っ白」な状況になりかねません… そんなことにならないためにも、PC上で動くWordPressサイトを「MAMP」というソフトを使って構築するための手順を紹介します！ MAMPでMacにWordPressの開発環境を準備する WordPressテーマのカスタマイズをサーバー上で行うと、失敗した時にページを真っ白にしてしまい、管理画面にも入れない…といった大変な状況になることが時々あります…（僕は過去2度ほどやらかしました） そんなことにならないためにも、PHPのコードなどはローカル環境でカスタマイズすることをおすすめしています。 …ということで、今回はWordPressなどのWebサイトの動作に必要なWebサーバーやデータベースなどをPC上に構築できるソフト「MAMP」を使って

MAMPで複数のWordPressサイトの開発環境を作る方法はいくつかあると思いますが… 今回、僕が1つのMAMPで複数のWordPress開発環境を作った方法について紹介します！ おそらく一番わかりやすくてサクッと出来る方法ではないかと思います！

Gitリポジトリにプッシュすればサーバーに自動でデプロイしてくれるような外部サービスもあるようですけど… どうせGitHubでソース管理してるなら何箇所にもプッシュせず、GitHubにだけプッシュしたら自動デプロイさせたい！ しかも、プッシュするブランチ毎に動作を変えたい！ ってことで、今回は先人の力を借りまして、レンタルサーバー（エックスサーバー）上にGitHubプッシュでブランチ毎に自動デプロイする仕組みをPHPで作ってみました！ 僕の作っている野良WordPressテーマyStandardがまさにこの仕組で自動デプロイされています！ GitHubプッシュでブランチ毎に自動でサーバーにデプロイさせたい よっひー(@yosiakatsuki)です。 僕は今年から自作のWordPressテーマ（yStandard）の一般配布を始めたのですが、 バージョンアップ時の展開作業が結構面倒で、Gi

TOPページや記事下などなど…任意の場所に「あるカテゴリーの記事を何件か自動で表示したい」時があるかと思います。 ブログであればイチオシの記事一覧、会社やお店のサイトであればお知らせの一覧など 今回はそんな「カテゴリーで投稿を絞り込んで表示する」カスタマイズが必要になった時のサンプルです 特定のカテゴリーが設定された投稿の一覧を表示させる 早速ではありますが、今回は「あるカテゴリーの記事最新4件を表示する」カスタマイズをしてみます 特定のカテゴリーの投稿の一覧を表示するPHPコード 早速ではありますが、「あるカテゴリーの記事最新4件を表示する」コードはコチラ▼ <?php $arg = array( 'posts_per_page' => 4, // 表示する件数 'orderby' => 'date', // 日付でソート 'order' => 'DESC', // DESCで最新から表

「Simple GA Ranking」で同じカテゴリーの人気記事ランキングを作る 今回は個別記事ページやカテゴリー一覧ページで、関連するカテゴリーに属する記事の人気記事ランキングを作ります 絞り込みパラメータ まずはパラメータの確認です ランキングの元になるデータを取得する関数sga_ranking_get_dateの引数に指定する配列に絞り込み用のパラメーターを指定できます //例 $sga_args = array( 'category__in' => 'cat1,cat2' //「cat1」と「cat2」というカテゴリーで絞り込み ); カテゴリーの絞り込みは上の例のように'category__in'で指定します 指定するのはカテゴリーのスラッグで、複数指定したい場合はカンマ区切りで記述します カテゴリーで絞り込んだランキングを実際に使えそうな形にしてみる それでは、関連するカテゴリ

今までGmailを使って送受信していたメールでも新しく作ったG Suiteのアカウントへ移行することが出来ます。 G Suiteの管理者権限を持っている必要がありますが、移行自体は管理ツールが用意されているのでとっても簡単です！ 今まで@gmail.comのメールアドレスでメールのやり取りをしていたけど、「心機一転G Suiteで独自ドメインのアドレスを使ってやっていくぞ！」という時などにご参考にしてみて下さい GmailアカウントのメールをG Suiteのアカウントへ移行 早速ですが、GmailアカウントのメールのメールをG Suiteのアカウントへ移行する手順をご紹介していきます！ メールに限らず、G Suiteアカウントに関連するデータの移行についてはヘルプが用意されています。 G Suiteの移行ツールにアクセス まずはG Suiteの管理コンソールにログインしておきます。 ログイ

人気記事はなるべく多くの人に見てもらいたいですよね ただ、表示設定を「固定ページ」にしていない場合、TOPページには投稿の一覧が時系列で並んでいることがほとんどかと思います。 実はTwitterの「プロフィールに固定表示する」機能のように任意の記事を投稿一覧の先頭に固定する機能がWordPressにもあります！ 今回は、WordPressの標準機能を使って”今すぐ”、”誰でも簡単に”ブログの人気記事をTOPページに常に表示させる方法をご紹介します ブログ内の人気記事をTOPページでもアピールしたい！ 「人気の記事をTOPページで表示したい！」 と言うと、人気記事ランキングを作るプラグインを導入したり、プログラムを書いて機能を追加したり…なんてことを思い浮かべる方も多いのではないでしょうか？ 実はもっと手軽に、WordPressの標準機能を使って人気のある記事を投稿一覧の先頭に常に表示させて

【WordPress】アップロード時に自動で画像を圧縮できるプラグイン「Compress JPEG & PNG images」 WordPressで画像を圧縮できるプラグインと言ったら「EWWW Image Optimizer」が有名です。 今回は画像を圧縮できるWebサービスとして有名な「TinyPNG」謹製のプラグインを使ってみることにしました。 1ヶ月間に圧縮できる枚数に限りはあるものの、EWWW Image Optimizerに比べて設定項目も少なくて使いやすい、かつ、圧縮率も良い感じだったので早速乗り換えることにしました！ 2018.08.06 : バージョン 3での変更点に合わせて記事内容を編集しました。 「EWWW Image Optimizer」よりしっかり圧縮！「Compress JPEG & PNG images」 画像圧縮できるWebサービス「TinyPNG」からWo

WordPress 4.7からの機能になりますが、今まで固定ページで出来ていたテンプレートの選択を投稿やカスタム投稿でも出来るようになっています。 投稿では、single-{slug}.phpといったテンプレートを作ったり、独自で何かしら機能を付け足さなければならなかったと思いますが、この機能を使うと楽できそうです。 投稿やカスタム投稿でも管理画面からテンプレート選択出来るようにする。 今まで固定ページではテーマのテンプレートファイルにTemplate Name:から始まるコメントを一番初めに書いたテンプレートファイルを作れば、管理画面からテンプレートを変更することが出来ました このカスタムページテンプレートを投稿やカスタム投稿タイプでも選択出来るようにする方法がありました Template Post Type: をコメントに追加 カスタムページテンプレートの書式は次のようになっていたと思

ブログ記事がどれだけシェアされているか確認するために、Twitterのエゴサーチは欠かせません。 ただ、いつからか「.net」のドメインでのエゴサーチがどうやらうまくいかないようですね… アプリを使えばなんとかエゴサーチは出来るようですが、今ではほとんどMacからWeb版のTwitterを見ることが多いので、ちょっと困ったな… と思っていたら、どうやらIFTTTでエゴサーチ結果をトリガーになにか連携させる場合はいい感じにエゴサーチできてるっぽいので、その方法について紹介します！ .netのエゴサーチにIFTTTを使う 以前は「.com」ドメインでブログを運営してましたが、新しいブログに移ってから「.net」ドメインになって困ってました。よっひー(@yosiakatsuki)です。 いつからか「.net」のドメインでのエゴサーチがうまくいかないようで… 回避策として、Twitter純正ではな