はてなブックマーク

こんにちは。ウェブデザインチームのharuです。新宿中央公園にスタバやカフェができたので息抜きによく行ってます。 複数のWordPresを運営していると、それぞれの情報の一部を表示させたい事があると思います。wp-loadを利用することで別のWordPressに情報を表示させる事ができます。 この方法は、例えば下記のようなケースに利用されます。 同一サーバーのWordPressでなくても、別サーバーの別ドメインのWordPressの情報を読み込んで表示させる事ができます。とても便利ですね。 ファイルの構成 今回は読み込ませたい箇所をモジュールとなるファイルを用意して、そのファイルを読み込むようにします。 モジュールファイルの用意 モジュールとなるファイルは今回「inc-file.php」としました。 いつもどりWordPressの関数を記載します。 このまま読み込ませても何も表示されないの

日本語化されていないWordPressのプラグインを日本語化にする手順をご紹介します。 WordPressのプラグイン設定画面に表示されるテキストの全ては「.mo」ファイルに書かれています。 .poファイル、.potファイルはベースとなるファイルで、このpo（またはpot）ファイルを編集して、moファイルにコンパイル（出力）します。 例えるとエクセル（xlsx）ファイルを編集して、csvファイルに出力するのと同じです。 poファイルを編集するPoeditをインストールする poファイルの編集はPoeditというソフトを使います。もちろん無料でご利用いただけます。ふだんは有料版を使用していますが、今回は無料版での利用方法をご案内します。 Poedit Poeditをインストールして起動します。 Poファイルを編集して日本語訳にする方法 まずオリジナルのpoファイルを複製してファイル名を「●●

お薦めのWordPressのイベント カレンダーをご紹介します。カレンダープラグインはこの3つの中から選べば良いでしょう。 結論からお伝えします。 「定休日や営業日だけ分かればよい」場合は「WP Simple Booking Calendar」がお薦めです。 不定期なセミナーやイベント、ブライダルフェアなど、不定期で行事が多い場合は「Modern Events Calendar」の一択です。 礼拝や塾など、毎日・毎週・毎月決まった行事の場合は「Event Organiser」でも良いですが、日付の設定が豊富な「Modern Events Calendar」の方がお薦めです。 イベントカレンダー・プラグインの特長 それぞれのイベントカレンダー・プラグインの特長をご紹介します。 WP Simple Booking Calendar トップページや、サイドバー、フッターなど好きな場所に、シンプル

WordPressのヴィジュアルエディターに新しいボタンを追加する方法です。 今回は、ヴィジュアルエディターに下図のようなボタンを追加します。 テキストを選択してボタンをクリックすると、下記のようなタグが仕込まれる仕様です。 HTML 仕込まれるタグは変更できるので、好きなタグをボタン一つで挿入することができます。 プラグイン「Advanced Editor Tools (旧 TinyMCE Advanced)」をインストールしていても使えます。 ボタンの追加方法 早速ボタンを追加していきましょう。 必要なファイル ボタンを追加するには下記のファイルが必要となります。 ボタンアイコン用のpngファイル（サイズは20X20） tinymce_quotebutton.js swpbtn-shortcode.php エディターに表示させるボタンアイコンは事前に作成しておきましょう。 JavaSc

ドメインやURLの変更で利用するリダイレクトの基本とテンプレートです htaccessとは ウェブサーバの設定を簡易的にできるファイルのことです。 ウェブサーバの設定をいじるにはターミナルでコマンドを入力しておこなうため、サーバ管理者以外の人にはハードルが高い作業になります。 そこで「.htaccess」です。 htaccessファイルに命令文を書くと、サーバが命令文にしたがって処理してくれます。 htaccessファイルはSEOの作業でも使われるため、ホームページの制作や運営には必ず使われます。 .htaccessファイルが使えるサーバ htaccessのファイル名は「.htaccess」となります。.htaccessファイルをサーバにアップロードすることで機能します。 htaccessファイルは多くのウェブサーバで使えますが、Nginxを利用しているサーバではhtaccessファイルは

WordPressのキャッシュ系プラグインとして、人気の高い「W3 Total Cache」の設定方法です。サーバやウェブサイトによってベストな設定方法を紹介します。また「W3 Total Cache」で不具合が出た場合の対策、削除方法もご紹介します。 「設定が難しい」と言われる「W3 Total Cache（W3 トータル・キャッシュ）」ですが、ウェブサイトの特徴や、サーバーのスペックなどに合わせて最適な設定ができれば、強力なキャッシュプラグインとしての恩恵を受けることができます。 W3 Total Cacheは、データベースキャッシュや、オブジェクトキャッシュなど、様々なキャッシュ機能をトータルで設定、管理できます。 サーバのスペックが高い場合、W3 Total Cacheの機能をフル活用できます。 W3 Total Cacheの特徴 細やかな設定ができるため、キャッシュプラグイン特有

世界で愛用されているメールフォーム プラグインContact Form 7の設定、データ保存、スパム対策、バリデーションなど、カスタマイズから便利なプラグインをご紹介します。 WordPressのフォームプラグインでは「Contact Form 7」と「MW WP Form」が人気です。 MW WP Formは標準で「問い合わせデータの保存」「確認、エラー、完了ページ」の設定も可能となっています。 それでもContact Form 7をお薦めするのは豊富なアドオンプラグインがあるからです。 MW WP Formを導入しても、お客様の要望に答えられない事が多々ありContact Form 7へ乗り換える事も少なくありません。 アドオンを利用することで、スピーディーでコストを抑えることも可能となります。 Contact Form 7設置の流れ 設定画面でフォームを作成する メールの設定 自動返

新宿のウェブ制作会社ITTIのデザイナーNNです。コロナウィルスでEC案件が急に増えましたね。EC売上げアップに貢献できるように頑張っています。 WordPressのフックを利用して、管理画面のダッシュボードやサイドメニューをカスタマイズする方法をご紹介します。プラグインを使うより簡単だと思いますよ。 ダッシュボードのカスタマイズ ダッシュボードのウィジェットを非表示にします。 functions.phpに下記を追記します functions function remove_dashboard_widgets() { global $wp_meta_boxes; unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']); // 現在の状況 unset($wp_meta_boxes['dashboa

WordPressの記事をTwitterやFacebookなどのSNSへも自動的に投稿するベストなプラグインをご紹介します SNS自動投稿プラグインとは、ブログ記事の投稿と同時にFacebookやTwitter、InstagramなどのSNSにも記事の一部を投稿してくれるプラグインです。また、過去のブログ記事を自動的にSNSに投稿することもできます。 SNS自動投稿プラグインを選ぶポイント SNS自動投稿プラグインは複数ありますが、選ぶポイントは下記になります。 連動できるSNSの種類 FacebookやTwitter、Instagramなど、連動したいSNSがプラグインで行えるか。 ウェブサイトの規模や構造 運営しているウェブサイトが、マルチサイトやEC（Woocommerce）の場合に対応しているか。 複数ユーザーで記事を投稿している場合は、効率的に運営できるか。 プラグインの継続的な

InstagramをウェブサイトやWordPressに表示させたり、WordPressの記事を自動的にInstagramにも投稿させる方法など、Instagramの連携方法をご紹介します。 「ホームページにインスタグラムの写真を表示したい」 「ブログを投稿すると、インスタグラムにも自動で投稿したい」 と言ったケースは多いと思います。 ホームページとインスタグラムの連動についてベストな方法をご紹介いたします。 ホームページとインスタグラムの連動させる事前確認 SEOの影響 表示する枚数やキャッシュ機能、LazyLoadなどを利用することで、素早く表示させることができます。 instagramの写真を表示させることで、ホームページの表示速度が遅くなり、SEOへの影響を気にされる方もいますが、当社の事例や、海外の事例をみても影響はありません。 ただし、サイトスピードテストには影響するため、点数が

呼び名は多いのですが「復元ポイント」「回復ドライブ」「バックアップが２種類」の３つだけを覚えておきましょう。 復元ポイントとは 不具合前のWindowsに戻すことができる機能です。 Windowsは定期的に復元ポインを自動で作成します。アップデート前には必ず復元ポイントが作成されます。 もしWindowsに不具合が発生したら、復元ポイント機能を使って、不具合が発生する前のWindowsに戻すことができるのです。 例えば復元ポイントに1月1日や3月1日があれば、1月1日や3月1日の状態に戻すことができます。 復元ポイントは、Windowsアップデート前後やアプリケーションをインストールした時などに自動で作成されますが、手動で作成することもできます。 ソフトやドライバーのインストールやアンインストール前に復元ポイントを作成しておくと、作業を失敗しても復元ポイントを利用してやり直すことができます

頻繁に変わるSNSのAPI規約に疲れているウェブディレクターです。2020年になりTwitter API申請が若干緩くなりました。 Twitter APIを利用するためのデベロッパー申請から、APIキー、トークン取得方法を詳しく解説します。 Twitterのボットや、アプリ開発、ワードプレスのTwitterへの自動投稿などで必要となるTwitterのAPI利用の申請からAPIキーの取得方法です。 若干審査が緩くなり、申請が許可されやすくなっています。 申請は英語になりますので、実際に許可された英文も紹介します。 英語が苦手な方はDeepLを使って英文にすると良いでしょう。 TwitterのAPI利用申請 APIの利用申請には英文が必要ですが、実際に審査を通過した例文もご紹介します。 まずはTwitterにログインした状態で、Deeloperサイトへアクセスします。 「Create an a

こんにちは。イッティのデザイナーのHです。IEを非対応の場合はCSSグリッドを積極的に使うことができます。 CSSグリッドは難しくはありません。グリッドの基本と、３つほどのプロパティを覚えれば使いこなすことができます。このページを読み終える頃にはCSSグリッドを使いこなす事ができているでしょう。 グリッドCSSは、グリッドの分割方法と新しい単位frを覚えることで、グリッドCSSを使いこなすことができます。 グリッドの指定方法がいくつかありますが、まずは基本的な指定方法を習得しましょう。 複雑なレイアウトも可能ですが、運用の効率化も考慮してシンプルなグリッドレイアウトにすることも重要になります。 まずはグリッド線の理解 まずはグリッド線の理解から。 Y軸は「row」 X軸は「column」 です。 グリッドを指定するプロパティ グリッドを指定するプロパティや、値の記述方法はいくつか用意されて

新宿のウェブ制作会社イッティのデザインスタッフです。通常のHTMLによるホームページをWordPressにコンバートする案件も増えてきています。今回はWordPressのサーバ移行方法をご説明します。 WordPressの移行方法はいろいろな方法がありますが、当社ではオーソドックスなデータベースとファイルを移行させる方法をおこなっています。WordPressを移行して、さらにドメイン（URL）も変更します。 WordPressを別のサーバへ移行し、ドメイン（URL）も変更する方法です。 移行作業の流れ 移行の流れは下記になります。 現在運営しているWordpressの画像やテンプレート、プラグインなどのファイル一式を保存する phpMyAdminを使ってデータベースを保存する 新しいサーバのphpMyAdminを使ってデータベースをインポートする 新しいWordPressのURLを書き換え

新人ウェブデザイナーのNNです。新宿って地図を見ていてもイロイロなスポットがあるので面白いですよね。今回はウェブサイト制作に欠かせないGoogleMapの表示方法です。 GoogleMapをウェブページに表示させる方法をGoogle APIの取得から、地図の表示方法、表示エラーの解消法まで解説いたします。 Google Map APIを使って地図を表示させる手順 APIキーの取得など手間がかかることもありますが作業の流れは下記になります。 Google Map APIキーを取得 地図を表示させるJavaScriptをページに設定 Google Maps API キーの取得方法 Googleにログインした状態で、Google Cloud Platformにアクセスします。 ヘッダーメニューの「▼」をクリックします。 「新しいプロジェクト」をクリックします。 プロジェクト名を記入してプロジェク

wordpressのカスタムフィールドプラグインとして人気の高い「Custom Field Suite」の表示方法、チェックボックスの追加方法などを解説します。 「Advanced Custom Fields」も人気があるプラグインですが「Custom Field Suite」には、「Advanced Custom Fields」では有料バージョンにしかないフィールドのリピート機能があります。 また「Custom Field Suite」の方が構造がシンプルなので、他のプラグインとコンフリクトすることも無いでしょう。 Custom Field Suite Custom Field Suiteのフィールド追加方法 使い方はシンプルです。必要なフィールドを追加していくだけです。 「デフォルト値」や「必須フィールド」なども設定できます。 カスタムフィールドの表示 追加したカスタムフィールドの値を

headタグ内のmetaタグ、linkタグのまとめ。随時変更していきます。 meta情報は、検索サイトやウェブサービス、アプリケーションに端的にセマンティックな情報を伝えたり、処理を指定したりすることができます。 サービスごとにさまざまなmeta情報があり、SEOに効果があると悪用されたmeta情報などもあり、現在セマンティックな情報はマイクロフォーマットが推奨されるようになりました。 いまもなお利用価値のあるmeta情報から、すでに利用されてないmeta情報まで、奥深いmeta情報の世界を覗いてみましょう。 ページ情報に関するmeta情報 ページの概要を伝える ページの概略を伝えるmeta情報です。 Googleなどの検索結果のスニペットとして表示され、クリック率を高める重要なmeta情報の１つです。 ページ数が多いホームページや、ウェブ担当者の手が回らなくて概略を書くことができない場合

制作するウェブサイトには、構造化データのJSON-LDが記述されることが多くなりました。 作業効率も兼ねて、JSON-LDのサンプルをまとめました。 JSON-LDを記述する時にお世話になるウェブサイト JSON-LDを記述する時には下記のウェブサイトを頻繁に利用することになります。 Googleの構造化データテストツール Googleが提供している構造化テストツールで、エラー箇所も教えてくれます。 Googleの構造化データのリファレンス 構造化データの解説やサンプルが提供されています。 schema.org 構造化データの情報がまとめられているウェブサイトです。サンプルも豊富です。 schema.orgが提供する構造化データテストツール Googleが推奨する以上の構造化データを実装する際のテストにお薦めです。 JSON-LDのサンプル パンくずのJSON-LD サンプルは3階層目にあ

売り上げ・アクセス数を伸ばしたい 月々の管理費を抑えたい リニューアルで失敗したくない 提案やサポートしてほしい ホームページに関することは お気軽にご相談ください

ホームページの表示速度を上げるには、デバイスごとの画像ファイルの切り替えが有効です。画像フォーマットのWebPと、LazyLoadで遅延読み込みで、表示速度を体感できるパフォーマンスにします。 表示速度が異常に遅いホームページはSEOにも不利になることから、近頃はホームページの表示速度に関してセンシティブになっています。 ホームページの表示が遅い主な原因は画像ファイルの読み込みです。 今回は、PCとスマートフォンそれぞれに最適な画像ファイルを読み込むようにします。 さらにLazyLoadを使って遅延読み込みさせて表示速度を早めます。 また、画像ファイルに「WebP」フォーマットを使って、画像の軽量化を図ります。WebPフォーマットが対応しているブラウザにはWebP画像を表示させ、未対応のブラウザには通常のjpgやpng画像を表示させます。 デバイスに合わせたサイズの画像を読み込む Lazy

サーバー、ドメインが、スパムメールのブラックリストに載ってしまった時の対処方法です。ブラックリストに載っていないかの調べ方から、ブラックリストの削除申請方法までご説明いたします メールが「送信エラーで戻ってくる」「ゴミ箱に届いてしまう」場合は、主にメールの認証、またはブラックリストに登録されたことが原因です。 この記事ではブラックリストに登録された場合の確認方法と解除方法をご案内します。 メールの送信エラーにのメッセージがあれば、スパムメールと判定されて送信相手のサーバに拒否されている可能性があります。 「This is a permanent error」 「said: 550 SC-001（hotmail、livemail）」 スパムメール判定を解除するには、プロバイダーやメールサービス、メールサーバなどが導入しているスパム判定のブラックリストからドメイン、またはIPアドレスを削除して