WP サイトマップのプラグインは「XML Sitemap & Google News feeds」がよい。
WP サイトマップのプラグインは「XML Sitemap & Google News feeds」がよい。
Google Search Console に登録するサイトマップを自動で作成してくれるWPプラグインの使用経験メモです。
Jetpack のXMLサイトマップ
Google NEWSのサイトマップ
Jetpackが作ったGoogle NEWSのサイトマップで、Google Search Consoleがエラーを出力しました。
XML Sitemap & Google News feeds
https://ja.wordpress.org/plugins/xml-sitemap-feed/
通常のサイトアップとGoogle NEWSのサイトマップ両方で、Google Search Consoleが正常に処理しました。
WP WordPress Ping Optimizer 記事を投稿したらPing送信
Pingサーバーが世界中のウェブサイトの更新情報を収集しています。
記事を投稿したらPing送信を行うと投稿が認知され検索ロボットが記事を見つけやすくなり、結果としてアクセスアップにつながるという効果が期待できます。
一度設定しておくだけであとはプラグインが自動でやってくれます。
Pingサーバー 2018/04/27時点有効
http://blog.goo.ne.jp/XMLRPC
http://www.blogpeople.net/servlet/weblogUpdates
http://ping.blo.gs/
http://blogsearch.google.co.jp/ping/RPC2
http://blogsearch.google.com/ping/RPC2
http://rpc.reader.livedoor.com/ping
http://ping.fc2.com/
http://ping.feedburner.com/
http://ping.rss.drecom.jp/
http://wpdocs.sourceforge.jp/Update_Services
http://rpc.pingomatic.com/
http://ping.blogranking.net/
http://ranking.kuruten.jp/ping
http://www.blogstyle.jp/
http://www.blogpeople.net/ping/
http://ping.freeblogranking.com/xmlrpc/
http://rpc.weblogs.com/RPC2
http://services.newsgator.com/ngws/xmlrpcping.aspx
http://ping.dendou.jp/
http://blog.with2.net/ping.php/
http://ping.cocolog-nifty.com/xmlrpc
http://ping.sitecms.net
http://pingoo.jp/ping/
http://taichistereo.net/xmlrpc/
http://ping.blogmura.com/xmlrpc/hidmbp2r256f
WP UpdraftPlus Backup/Restore 自動で定期的にWPコンテンツをバックアップ
WP UpdraftPlus Backup/Restore
https://ja.wordpress.org/plugins/updraftplus/
自動で定期的にWPコンテンツをバックアップ。
バックアップ先は、ドロップボックスやGoogleドライブなどにできます。
WP Google XML Sitemaps
サイトマップは、テーマに付随した機能で設定したり、多機能なプラグインで設定できます。
テーマを変更したり、多機能プラグインを停止した場合、サイトマップ設定していたことを忘れてしまう事があります。
このようなときは、サイトマップ専用のプラグインを使うと管理しやすくなります。
Google XML Sitemaps
https://ja.wordpress.org/plugins/google-sitemap-generator/
Google XML Sitemapsの設定方法
プラグインをインストールしたら、管理画面の左メニューの「設定」の中に「XML-Sitemap」が追加されます。
これをクリックすると設定画面が表示されます。
設定は、初期値でOKです。
詳しい方は、色々いじることでベストなサイトマップが作成できます。
Google Search Console
https://www.google.com/webmasters/tools/home?hl=ja
WP プラグイン Google XML Sitemaps の設定が終わったら、Google Search Consoleに登録しましょう。
これは、必ず行った方が良いですよ。
sitemap.xml
WP TablePress 罫線を表示させる方法
WP TablePress 罫線を表示させる方法
WP プラグイン TablePress の罫線は、WPテーマに依存します。
WPテーマがテーブルの罫線を薄く表示するように作られていると、TablePressの表の罫線も薄くなります。
ここでは、TablePressの罫線表示をTablePress機能にあるカスタムCSSを使い表示させます。
前提
WP プラグイン TablePresをインストール済み
方法
WP管理画面 左メニュー > TablePress > プラグインのオプション
カスタム CSS の入力箇所に下記をコピペ
/* すべてのセルに枠線を付加 */
.tablepress thead th,
.tablepress td {
border: 1px solid #000 !important;
padding: 1em;
margin: 1em;
}
.tablepress tbody tr {
}
.tablepress tfoot th {
background-color: #D3D3D3 !important; /* 背景色を指定 */
border: 1px solid #000 !important;
}
/* テーブルの外側（周囲）の余白を指定 */
.tablepress {
margin: 1em 1em;
}
/* テーブル全体の横幅の指定 （[table id=1 /]）*/
.tablepress-id-1 {
width: 96%;
}
WP ContactForm7 フォームをいい感じにカスタマイズするCSS
WP ContactForm7 フォームをいい感じにカスタマイズするCSS
■概要
自身の経験では、エントリーフォームにこだわるよりも、エントリーしたくなる動機付けにこだわる方が成果が上がります。
しかし、成熟産業では、局部改善の総合により競争力を高めるという方法もあります。
ここでは、こだわり感を出したエントリーフォームを簡単に作る方法を紹介します。
■システム環境
Webシステム： ワードプレス
プラグイン： ContactForm7
https://ja.wordpress.org/plugins/contact-form-7/
■制作内容
メールアドレスを登録するフォーム。
スパム防止にGoogle reCAPTCHAを追加。
登録したメールアドレス宛て本登録用のURLを送信。
■準備
ワードプレス、ContactForm7、Google reCAPTCHAをセットアップ。
ContactForm7にGoogle reCAPTCHAを設定。
これらのセットアップ方法は、このページで紹介していません。
検索すると丁寧で親切な紹介サイトがあります。
■ContactForm7
WP 左サイドメニュー「お問い合わせ」
・「フォーム」タブに記入
<label>メールアドレス
[email* customer-mail]</label>
<p> </p>
<p align="center">[recaptcha]</p>
<p> </p>
[submit "送信"]
<p align="center">メールが送信されます。</p>
---
・必須、任意を表示させる場合の例
<span class="must">必須</span> メールアドレス
[email* your-email]
<span class="free">必須</span> お名前
[text* your-name]
<span class="free">任意</span> 題名
[text your-subject]
<span class="must">任意</span> メッセージ本文
[textarea your-message]
[submit "送信"]
・「メール」タブに記入
送信先： [customer-mail]
送信元： "○○会社 ○○事務局"<notification@*******.com>
題名： "○○会社 ○○お申込ページのご案内
追加ヘッダー： Reply-To: <******@*****.com>
メール本文：
この度は、○○をご希望いただき誠にありがとうございます。
こちらのリンクからお申込してください。
https://******************
お手続きの流れ
https://******************
今後とも○○会社をよろしくお願い申し上げます。
----
このメールは、ご登録メールアドレス宛に自動的に送信しています。
==========================================================================
○○会社
以下、定型のメールフッダー
・「メッセージ」タブに記入
メッセージが正常に送信された：
メールを送信しました。 メールに記載されたリンク先の画面にて、お申し込みしてください。 ※1分以内にメールが届かない場合は、「迷惑メール」フォルダに振り分けられている可能性があります。
メッセージの送信に失敗した：
メッセージの送信に失敗しした。再度お試しください。
入力内容に不備が見つかった：
入力内容に問題があります。確認して再度お試しください。
WP 左サイドメニュー「お問い合わせ」
「インテグレーション」にGoogle reCAPTCHAを設定。
■CSS
WP 左サイドメニュー「外観」＞「カスタマイズ」＞「追加CSS」に以下をコピペ
/* ContactForm7のフォームをいい感じにするCSS */
/* CF7 入力欄のフォントの太さを指定 */
form p {
font-weight: bold;
}
/* CF7 フォームのデザイン */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
width: 100%;
margin-right: 10px;
margin-top: 8px;
border: 1px solid #d0d5d8;
border-radius: 3px;
font-size: 1.4em;
}
textarea.wpcf7-form-control.wpcf7-textarea {
height: 200px;
}
/* CF7 必須入力欄の背景を指定（黄色） */
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
background: rgba(255, 255, 142, 0.46);
}
/* CF7 送信ボタンのデザイン */
input.wpcf7-submit {
width: 100%;
height: 80px;
background: #00bcd4;
color: #fff;
font-size: 1.3em;
font-weight: 600;
}
/* CF7 エラーメッセージのデザイン */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
color: red;
font-weight: 600;
}
/* CF7 必須マーク */
.must{
color: #fff;
margin-right: 10px;
padding: 6px 10px;
background: #F92931;
border-radius: 20px;
}
/* CF7 任意マーク */
.free {
color: #fff;
margin-right: 10px;
padding: 6px 10px;
background: #424242;
border-radius: 20px;
}
■固定ページ
1．固定ページを新規で作成します。
2．離脱防止のためサイドメニューとヘッダーメニューを非表示に設定。これは、使用テーマに依存します。固定ページ属性のテンプレートで変更します。
3．タイトル
・ロゴ画像を表示（ヘッダーメニュー非表示の場合）
タイトル入力箇所に画像を指定します。
<img src="https://********" width="" height="" />
画像のURLは、WPメディアから取得します。
・テキストを表示（ヘッダーメニュー表示の場合）
タイトル入力箇所に「登録」などを入力
4．本文欄、「テキスト」タブでHTMLを登録
[contact-form-7 *****]の箇所は、WP 左サイドメニュー「お問い合わせ」からContactForm7 作成フォーム ショートコードを適用してください。
<p> </p>
<p>○○○○</p>
<p style="text-align: center;">[contact-form-7 id="1" title="○○お申し込みフォームをメール"]</p>
<p> </p>
------------------------------
参考
https://manablog.org/contactform7/
https://manablog.org/contactform7-css/
WP テーマ
WP テーマ
■企業サイト
Business Pro Theme + Genesis Framework
色々探し続けているけど、このテーマがNo.1。他社が越えられない多機能テーマ。
https://my.studiopress.com/themes/business/
Grazioso
http://grazioso.info/
LIQUID
https://lqd.jp/wp/
Lightning
https://lightning.nagoya/ja/
■ランディングページ専用
OOPS!
http://design-plus1.com/tcd-w/tcd048
■ランディングページ兼用
Business Pro Theme + Genesis Framework
LPは、このテーマで兼用。
https://my.studiopress.com/themes/business/
Grazioso
http://grazioso.info/
WP 使うプラグインのメモ
WP 使うプラグインのメモ
----------------------------------------
Shortcodes Ultimate
A comprehensive collection of visual components for WordPress
https://ja.wordpress.org/plugins/shortcodes-ultimate/
LPのカラム表示で使用。
WP標準にして欲しい。
----------------------------------------
TinyMCE Advanced
WordPress ビジュアルエディター TinyMCE の高度な機能とプラグインを有効化します。
https://ja.wordpress.org/plugins/tinymce-advanced/
アイコンができるので便利。
「続きを読む」アイコンを使うために使用。
----------------------------------------
TablePress
テーブル表示ができる。テーブル コードの記載が不要。
同じテーブルを複数ページで使用する場合は、これがいい。
テーブルのコードを書くより、プラグイン使った方が早くできれいになる。
https://ja.wordpress.org/plugins/tablepress/
----------------------------------------
Table of Contents Plus
自動的に目次を生成する。
ページとカテゴリーのサイトマップもショートコードで表示できる。
https://ja.wordpress.org/plugins/table-of-contents-plus/
----------------------------------------
Nelio A/B Testing
LP ABテストができるプラグイン。無料版の機能制限が少ない。
https://ja.wordpress.org/plugins/nelio-ab-testing/
----------------------------------------
Print, PDF & Email by PrintFriendly
PrintFriendly & PDF button for your website. Optimizes your pages and brand for print, pdf, and email.
https://ja.wordpress.org/plugins/printfriendly/
原稿を印刷して確認する為のプラグイン
通常は停止状態。
----------------------------------------
Redirection
すべての 301 リダイレクトを管理し、404 エラーをモニター
https://ja.wordpress.org/plugins/redirection/
----------------------------------------
Popup Maker
Easily create & style popups with any content. Theme editor to quickly style your popups. Add forms, social media boxes, videos & more.
https://ja.wordpress.org/plugins/popup-maker/
外部からLP表示したときのポップアップを表示。
ここから公式サイト表示には、使えない。通常ページで作った方が扱いやすい。
----------------------------------------
PCとスマホで表示する文字サイズを変更する方法
PCとスマホで表示する文字サイズを変更する方法
■HTMLコード
固定ページなどに記入
文字サイズは、large , middle , small の3種類
<!-- PCとスマホで画像や文字サイズを変更表示 -->
<div id="contents">
<div>
<p class="pc-image"><img src="PC用の画像URL" alt="" /></p>
<p class="sp-image"><img src="スマホ用の画像URL" alt="" /></p>
</div>
<div>
<!-- CSSで設定した文字サイズになる -->
<p class="pc-words-large">PCに表示する文字</p>
<p class="sp-words-large">スマホに表示する文字</p>
<!-- 文字サイズをHTMLで指定 -->
<p class="pc-words-large" style="font-size: 88pt;">PCに表示する文字</p>
<p class="sp-words-large" style="font-size: 88pt;">スマホに表示する文字</p>
<!-- 文字サイズと配置をHTMLで指定 -->
<p class="sp-words-large" style="font-size: 68pt;"><span style="text-align: center;">スマホに表示する文字</div>
<p class="sp-words-large" style="text-align: center;"><span style="font-size: 68pt;">スマホに表示する文字</div>
</div>
/* PCとスマホで文字サイズを変更 */
/* 文字サイズ、行間、横配置位置などは、ここで指定 */
/* 画像 */
#contents p.pc-image {
text-align: center;
}
#contents p.sp-image {
display: none;
text-align: center;
}
/* 文字サイズ 大 */
#contents p.pc-words-large {
margin-top: 0.1em;
margin-bottom: 0.1em;
text-align: center;
font-size: 3.5em;
}
#contents p.sp-words-large {
display: none;
margin-top: 0.1em;
margin-bottom: 0.1em;
text-align: center;
font-size: 1.5em;
}
/* 文字サイズ 中 */
#contents p.pc-words-middle {
margin-top: 0.1em;
margin-bottom: 0.1em;
text-align: center;
font-size: 2.0em;
}
#contents p.sp-words-middle {
display: none;
margin-top: 0.1em;
margin-bottom: 0.1em;
text-align: center;
font-size: 1.2em;
}
/* 文字サイズ 小 */
#contents p.pc-words-small {
margin-top: 0.1em;
margin-bottom: 0.1em;
text-align: center;
font-size: 1.0em;
}
#contents p.sp-words-small {
display: none;
margin-top: 0.1em;
margin-bottom: 0.1em;
text-align: center;
font-size: 1.0em;
}
@media only screen and (max-width : 640px){
#contents p.pc-image,
#contents p.pc-words-large,
#contents p.pc-words-middle,
#contents p.pc-words-small {
display: none;
}
#contents p.sp-image,
#contents p.sp-words-large,
#contents p.sp-words-middle,
#contents p.sp-words-small {
display: block;
}
}
WP 画像の上、中央に文字を配置する方法
PCとスマホは共通指定版。
■ページのHTML
<div class="text-on-image">
<img class="aligncenter" src="ここに画像のURLを記入" alt="ここに代替テキストを記入" width="" height="" /><p>表示の文字</p>
</div>
/* 画像の上に文字列を表示 */
.text-on-image {
width: 100%;
margin: 0;
padding: 0;
position: relative; /* 相対位置指定 */
}
.text-on-image img {
width: 100%;
}
.text-on-image p {
width: 100%;
font-size: 100%;
text-align: center;
bottom: 250px;
margin: 0;
padding: 0;
color: #fff;
background: rgba(0,0,0,0.0); /* 帯の透明度 */
position: absolute; /* 絶対位置指定 */
}
これがいい。
WP TablePress プラグイン テーブルの罫線を表示させるCSS。
WP TablePress プラグイン
枠線が表示されない場合は、
TablePress > プラグインのオプション > カスタムCSS に下記をコピペ
/* すべてのセルに枠線を付加 */
.tablepress thead th,
.tablepress td {
border: 1px solid #000 !important;
padding: 1em;
margin: 1em;
}
.tablepress tbody tr {
}
.tablepress tfoot th {
background-color: #D3D3D3 !important; /* 背景色を指定 */
border: 1px solid #000 !important;
}
/* テーブルの外側（周囲）の余白を指定 */
.tablepress {
margin: 1em 1em;
}
/* テーブル全体の横幅の指定 （[table id=1 /]）*/
.tablepress-id-1 {
width: 96%;
}
表の外枠、下の線が表示されない場合は、
TablePress > テーブルの内容 >一番下に空白の行を追加
テーブルのオプション
テーブルのフッター行：レ
テーマによって表の一番下の下線が隠れます。TablePressカスタムCSSを編集しても出せなかったので、フッター追加方法を採用。
細かいこと気にしない。これで良し。
CSSの !important は、他のスタイルシートより優先して表示させるという意味です。
