wordpress(ワードプレス)でHPを作るとなるとサーバー費用がかかったり広告が表示されたりといったイメージはありませんか?今回は完全無料でwordpress(ワードプレス)でHP制作する方法をご紹介します。
※情報が古い部分があったので2015年7月更新しました。
【ワードプレス】サイトマップの作成方法を初心者向けに解説
サイトマップといえば、HP上における地図のようなものですが、 このサイトマップ、実は2種類あるというのはご存知ですか? ひとつはサイトを訪問した人間がHPの全体像を理解したり目的のページを探しやすくするためのもので もうひとつはgoogleやbingの検索エンジンにHPの構造を知らせるためのものです。 またgoogleのweb master tool(ウェブマスターツール)にもFetch as Googleという機能があり ページを追加するたびにすぐに検索エンジンにインデックスさせて、コピーサイトを防止したり 検索に反映させたりすることも重要になります。 さてこれらの少々むつかしくて面倒そうな作業、ワードプレスではプラグインを使えば それぞれ1分で出来ます。非常に簡単でSEO効果も高いので是非とも導入して見てください。
PS Auto Sitemap
こちらは人間用のサイトマップを作成することが出来ます。 プラグインを有効化させたあと、先にサイトマップを表示させる固定ページが投稿ページを作成します。 その後「設定」→「PS Auto Sitemap」と進んで表示させる先を「固定ページ」が「投稿ページ」かを選択し、 「* サイトマップを表示する記事のIDを入力してください。」の所に投稿先のIDを記入して完了です。
Google XML Sitemaps
こちらは検索エンジン用のXML Sitemapsと呼ばれるものを自動生成してくれるすぐれものです。 なんとプラグインを有効化させたあと、「設定」→「google XML Sitemaps」と進んで「XML Sitemaps」を生成すると押せば ワンクリックで完了です。googleやbingにも情報を自動送信してくれるのでしばらく待てば反映されるはずです。 結果はweb master tool(ウェブマスターツール)やSEOチェキなどで確認できます。
PubSubHubbub
こちらも有効化させるだけで記事の更新を検索エンジンに自動送信してくれます。 検索エンジンのクロールは記事の更新頻度やサイト開設からの期間の影響を受けるのである程度サイトが 成熟してきたら記事の更新情報の送信には気を使わなくても大丈夫です。
【アイデアが素晴らしい】テレビCMまとめ
【ワードプレス】投稿名やリンクをカスタムしてSEO対策
みなさんWordPressのパーマリンクはどう設定していますか?
WebサイトのURLの中に任意のキーワードを入れることができます。
検索エンジンの検索対象は、記事の見出しや本文だけでなく、URLの文字列も含まれます。
URLの文字列に任意のキーワードを入れることで、小さなことですがSEO効果を高めることができます。
パーマリンク設定は、デフォルトでは、URLの中に投稿ID(post_id)が入っています。
マナビックではカスタム設定で/%category%/%postname%としています。
カテゴリーIDの下に投稿名が表示される設定ですね。
ただ、このままでは、URLに日本語の文字列が入ってしまいます。
SEO的には日本語で入れても一定の効果があるそうですが、そのURLをSNSなどで拡散したり
貼りつけたりした場合に文字化けが発生してしまうので
SEO用のキーワードを含めた英語の文字列に手動で変更した方がいいでしょう。
もう一つSEO対策する上で意外と知られていない豆知識を紹介します。
リンクを貼る際にリンク先のページを評価したくない場合はありませんか。
rel=nofollow を付けることで評価したくないWebサイトへの外部リンクを評価しないことも可能です。
サインインするボタンやCMS管理画面やECサイトの注文フォーム等、検索エンジンのクローラーが巡回する必要がないページ
アフィリエイト広告等の外部リンクなどはrel=nofollowの設定をしておきましょう。
見本HTML
<a href="サンプルURL" rel="nofollow">サンプル</a>
【ワードプレス】メニューのリンク先を変更する方法
グローバルメニューの中にあるホームボタンのリンク先が以前のサイトのリンク先のままになっていたのを発見したので変更しました。
header.phpなどを触るのかと思ったら、管理画面から簡単に変更できましたのでここに記録しておきます。
「外観」→「メニュー」の「ホーム」の中にリンク先を設定するところがあります。
そこで「ホーム」をおして、URLに任意のものを入力して、
ナビゲーションラベルにリンクの名前を入力します。「ホーム」などでいいと思います。
タイトルの属性はそのままで大丈夫です。
最後に右上のメニューを保存を押して完了です。
【ワードプレス】コメント欄の下の文字修正やコメントの非表示の方法
コメント欄の下の文章を消す
コメント欄の下に
次のHTML タグと属性が使えます: <a href=”" title=”"> <abbr title=”"> <acronym title=”"> <b> <b lockquote cite=”"> <cite> <code> <del datetime=”"> <em> <i> <q cite=”"> <strike> <strong>
というどうみても内部向けの記述があります。こんなのは訪問した人には不要なので、消してしまいましょう。
テーマフォルダの中にある「style.css」の最後に以下のタグを追加
/* コメント欄の下にある使用できるタグの表記を消す */ .form-allowed-tags{display:none;}
コメント欄の下の文章を変更する場合
もしこのコメント欄の下の文章自体を変更したい場合はfunctions.phpを修正する必要がありますが、子テーマでfunctions.phpを編集する時には注意が必要です。functions.php だけは先に子テーマが読み込まれて次に親テーマが読み込まれるので親テーマからそのままコピーするとエラーになります。もし,親テーマと同じ名前の関数が存在するとエラーとなり,画面が表示されなくなってしまう(真っ白になる)んです。ですので子テーマの functions.php は追加する関数だけを書く必要があります。
<?php add_filter("comment_form_defaults","my_special_comment_after"); function my_special_comment_after($args){ $args['comment_notes_after'] = 'ここを好きな文字列に変更する。HTMLコードも有効。'; return $args; } ?>
コメント自体を受け付けない場合
全般的な設定は「設定」→「ディスカッション」で設定出来ます。
投稿ごとや固定ページごとに設定することも出来ます。
まず、ダッシュボードの投稿画面に移動します。
編集したい投稿・固定ページをチェックボックスで選択します。
一括操作というドロップダウンリストから、編集を選択し、適用ボタンをクリックします。
コメント、トラックバック/ピンバック(ブログ投稿のみ)を許可しないに変更して更新をクリック。
【ワードプレス】コピーライトの入れ方と自動更新
フッター部分に、著作権表示で「Copyright(c) 2013-2014 WordPress All Rights Reserved.」
みたいにコピーライト表示をする方法をご紹介します。
やっぱりサイトの著作権表示は大事ですし、何よりかっこよくなります。
WordPress(ワードプレス)なら、このコピーライトの年号の部分をPHPを使って自動更新する事ができるんです。
twenty thirteenであればfooter.phpを以下のように編集します。
他のテーマを使っている場合でもfooter.phpに同じような場所があるはずです。
<?php do_action( 'twentythirteen_credits' ); ?> <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentythirteen' ) ); ?>" title=" <?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentythirteen' ); ?>"> <?php printf( __( 'Proudly powered by %s', 'twentythirteen' ), 'WordPress' ); ?></a>
の部分を下記のものと入れ替えましょう。
「HPやブログを始めた西暦」と記載されている部分に例えば2014年なら半角で2014と入力します。
こちらは時がたっても変化しません。
Copyright© HPやブログを始めた西暦- <?php echo date('Y');?> 会社名やサイト名 All Rights Reserved.
以上のように設定しておけば、[Copyright© 2014- 2015 manaBIC All Rights Reserved.]
のように西暦の右側だけが自動更新されるので便利です。
ちなみにCo. Ltd.はCompany Limitedの略なので会社でない場合は必要ありません。
センター寄せするなら
<Div Align="center">サンプル</Div>
Centerタグは非推奨なので出来るだけ使わないようにしましょう!(下)
<Center>サンプル</Center>
【ワードプレス】予約カレンダーの導入方法とデザイン編集方法
カレンダーの便利なプラグイン
The Events Calendar
The Events Calendarを使えばブログやHP上でイベントの開催日程を視覚的に分かりやすく告知することが可能になります。
The Events Calendarの設定方法
MTS Simple Booking C
MTS Simple Booking Cを使えば1時間ほどで予約システムが導入できます。
MTS Simple Booking Cの設定方法
Trust Form
Trust Formはお問い合わせ用のプラグインですが、予約フォームの日時をカレンダーから選択できるようにカスタマイズ可能です。
Trust Formの設定方法
カレンダーの見た目を編集する方法
カレンダーの色や形が気に入らなかったのでいろいろ探していたら
日にちを緑の丸に変えるスタイルシートがあったので、使ってみました。
下のコードをCSSの最後に記述するだけで変更可能です。
また、background-colorやborderを編集することで色も変えられますし、
一番下のborder-radiusの値を変えることで円の形も変えられます。
/* カレンダー comemo-theme-twenty-thirteen rev.0.1 */ #wp-calendar tbody td a { background-color: #2F7D3D; border-radius: 15px; color: white; display: block; height: 30px; width: 30px; margin: 2px auto; } #wp-calendar tbody td { width: 30px; } .widget_calendar table, .widget_calendar td { border-spacing: 5px; } #today { border: 1px solid green; border-radius: 2px; }