【ワードプレス】目次の作成方法と自動作成プラグイン

目次をつけてページの途中に飛ぶ方法としてはHTMLでいかのように記述する方法があります。ただしワードプレスではそんなこともプラグイン一つで出来てしまいます。しかも行や列の追加やソートなども出来るので是非導入してみてください。

まずはHTMLで記述した場合

目次
サンプルAに飛びます

サンプルBに飛びます


サンプルA


サンプルB

この場合のHTMLは次のようになっています。

[html]
<strong>目次</strong>
<a href="ここにページのURLを記述#1">サンプルAに飛びます</a>

<a href="ここにページのURLを記述#2">サンプルBに飛びます</a>

<a id="1" name="1"></a>
サンプルA

<a id="2" name="2"></a>
サンプルB
[/html]

プラグインを導入する場合

Table of Contents Plusは、記事の目次を自動生成するプラグインです。投稿や固定ページの記事に記述したH1からH6までの見出しのHTMLタグを基に目次を自動生成します。

導入方法

まずは左側のメニューから「プラグイン」→「新規追加」の順にクリックします
SnapCrab_NoName_2014-2-16_9-44-2_No-00
次に検索ボックスに「Table of Contents Plus」と入力して検索します。→「今すぐインストール」を押して有効化すれば完了です。

設定方法

Table of Contents Plusの設定をしていきましょう。インストールが完了して有効化すると左のメニューの設定の中に「TOC+」という項目が増えていると思います。もし見つからない場合はプラグインが有効になっていない場合があるのでプラグイン一覧からTable of Contents Plusを探して有効化しましょう。プラグイン一覧にも表示されない場合はインストールが出来ていないのでもう一度インストールし直してください。
基本的には同じ設定で大丈夫だと思いますが、詳細設定の部分だけはタイトルの設定方法によって異なるのでいろいろ試してみてください。
SnapCrab_NoName_2014-2-16_10-1-44_No-00
arrow11_8d
SnapCrab_NoName_2014-2-16_10-2-8_No-00
arrow11_8d
SnapCrab_NoName_2014-2-16_10-2-18_No-00

【おすすめプラグイン】表の自動作成ツールTablePress

HTMLで表を作成したいことはありませんか。以下のツールを使えば簡単に作成できて背景色なども変えられます。しかも著作権の表示の有無も決められるという優れもの。本当にありがたいツールですね。こちらで全体像を作成して細かいところを編集するなどすると使いやすいと思います。
表の自動作成ツール

 サンプル  サンプル
 サンプル  サンプル
 サンプル  サンプル
 サンプル  サンプル
 サンプル  サンプル
 サンプル  サンプル

[html]</pre>
<div style="margin: 0px; padding: 0px;" align="center">
<table style="border-collapse: collapse; border: 1px double #0000ff; background-color: #adde4a; color: #000000; text-align: left; width: 98%;">
<tbody>
<tr>
<th style="border: 1px double #0000ff; background-color: #66ccff; color: #ffffff; text-align: center;"></th>
<th style="border: 1px double #0000ff; background-color: #66ccff; color: #ffffff; text-align: center;"></th>
</tr>
<tr>
<td style="border: 1px double #0000ff; text-align: left;"></td>
<td style="border: 1px double #0000ff; text-align: left;"></td>
</tr>
<tr>
<td style="border: 1px double #0000ff; text-align: left;"></td>
<td style="border: 1px double #0000ff; text-align: left;"></td>
</tr>
<tr>
<td style="border: 1px double #0000ff; text-align: left;"></td>
<td style="border: 1px double #0000ff; text-align: left;"></td>
</tr>
<tr>
<td style="border: 1px double #0000ff; text-align: left;"></td>
<td style="border: 1px double #0000ff; text-align: left;"></td>
</tr>
<tr>
<td style="border: 1px double #0000ff; text-align: left;"></td>
<td style="border: 1px double #0000ff; text-align: left;"></td>
</tr>
</tbody>
</table>
</div>
<pre>
[/html]

HTMLで記述せずとも、ワードプレスではプラグインで簡単に作成できます。
編集画面の「プラグイン」→「新規追加」で「TablePress」を検索してインストール→有効化します

その後「TablePress」→「新しいテーブルを追加」と押して→列と行を指定して「テーブルを追加」

SnapCrab_NoName_2014-1-28_20-40-52_No-00

右のショートコードを表を作成したい位置に貼り付けて完了です。
SnapCrab_NoName_2014-1-28_20-43-59_No-00

【ワードプレス】完全無料でwordpressでHP制作を開始する方法

wordpress(ワードプレス)でHPを作るとなるとサーバー費用がかかったり広告が表示されたりといったイメージはありませんか?今回は完全無料でwordpress(ワードプレス)でHP制作する方法をご紹介します。
※情報が古い部分があったので2015年7月更新しました。
続きを読む 【ワードプレス】完全無料でwordpressでHP制作を開始する方法

【ワードプレス】サイトマップの作成方法を初心者向けに解説

サイトマップといえば、HP上における地図のようなものですが、 このサイトマップ、実は2種類あるというのはご存知ですか? ひとつはサイトを訪問した人間がHPの全体像を理解したり目的のページを探しやすくするためのもので もうひとつはgoogleやbingの検索エンジンにHPの構造を知らせるためのものです。 またgoogleのweb master tool(ウェブマスターツール)にもFetch as Googleという機能があり ページを追加するたびにすぐに検索エンジンにインデックスさせて、コピーサイトを防止したり 検索に反映させたりすることも重要になります。 さてこれらの少々むつかしくて面倒そうな作業、ワードプレスではプラグインを使えば それぞれ1分で出来ます。非常に簡単でSEO効果も高いので是非とも導入して見てください。

PS Auto Sitemap

こちらは人間用のサイトマップを作成することが出来ます。 プラグインを有効化させたあと、先にサイトマップを表示させる固定ページが投稿ページを作成します。 その後「設定」→「PS Auto Sitemap」と進んで表示させる先を「固定ページ」が「投稿ページ」かを選択し、 「* サイトマップを表示する記事のIDを入力してください。」の所に投稿先のIDを記入して完了です。
SnapCrab_NoName_2014-1-18_22-49-22_No-00

Google XML Sitemaps

こちらは検索エンジン用のXML Sitemapsと呼ばれるものを自動生成してくれるすぐれものです。 なんとプラグインを有効化させたあと、「設定」→「google XML Sitemaps」と進んで「XML Sitemaps」を生成すると押せば ワンクリックで完了です。googleやbingにも情報を自動送信してくれるのでしばらく待てば反映されるはずです。 結果はweb master tool(ウェブマスターツール)やSEOチェキなどで確認できます。

PubSubHubbub

こちらも有効化させるだけで記事の更新を検索エンジンに自動送信してくれます。 検索エンジンのクロールは記事の更新頻度やサイト開設からの期間の影響を受けるのである程度サイトが 成熟してきたら記事の更新情報の送信には気を使わなくても大丈夫です。

【ワードプレス】投稿名やリンクをカスタムしてSEO対策

みなさんWordPressのパーマリンクはどう設定していますか?
WebサイトのURLの中に任意のキーワードを入れることができます。
検索エンジンの検索対象は、記事の見出しや本文だけでなく、URLの文字列も含まれます。
URLの文字列に任意のキーワードを入れることで、小さなことですがSEO効果を高めることができます。

パーマリンク設定は、デフォルトでは、URLの中に投稿ID(post_id)が入っています。
マナビックではカスタム設定で/%category%/%postname%としています。
カテゴリーIDの下に投稿名が表示される設定ですね。

SnapCrab_NoName_2014-1-15_20-51-43_No-00

ただ、このままでは、URLに日本語の文字列が入ってしまいます。
SEO的には日本語で入れても一定の効果があるそうですが、そのURLをSNSなどで拡散したり
貼りつけたりした場合に文字化けが発生してしまうので
SEO用のキーワードを含めた英語の文字列に手動で変更した方がいいでしょう。

もう一つSEO対策する上で意外と知られていない豆知識を紹介します。
リンクを貼る際にリンク先のページを評価したくない場合はありませんか。
rel=nofollow を付けることで評価したくないWebサイトへの外部リンクを評価しないことも可能です。
サインインするボタンやCMS管理画面やECサイトの注文フォーム等、検索エンジンのクローラーが巡回する必要がないページ
アフィリエイト広告等の外部リンクなどはrel=nofollowの設定をしておきましょう。

見本HTML

[html]
<a href="サンプルURL" rel="nofollow">サンプル</a>
[/html]

【ワードプレス】メニューのリンク先を変更する方法

グローバルメニューの中にあるホームボタンのリンク先が以前のサイトのリンク先のままになっていたのを発見したので変更しました。
header.phpなどを触るのかと思ったら、管理画面から簡単に変更できましたのでここに記録しておきます。

「外観」→「メニュー」の「ホーム」の中にリンク先を設定するところがあります。

SnapCrab_NoName_2014-1-9_21-8-46_No-00

そこで「ホーム」をおして、URLに任意のものを入力して、
ナビゲーションラベルにリンクの名前を入力します。「ホーム」などでいいと思います。
タイトルの属性はそのままで大丈夫です。

SnapCrab_NoName_2014-8-17_21-54-16_No-00

最後に右上のメニューを保存を押して完了です。
SnapCrab_NoName_2014-8-17_21-56-53_No-00

【ワードプレス】コメント欄の下の文字修正やコメントの非表示の方法

コメント欄の下の文章を消す

コメント欄の下に
[html]
次のHTML タグと属性が使えます: <a href=”" title=”"> <abbr title=”"> <acronym title=”"> <b> <b lockquote cite=”"> <cite> <code> <del datetime=”"> <em> <i> <q cite=”"> <strike> <strong>
[/html]
というどうみても内部向けの記述があります。こんなのは訪問した人には不要なので、消してしまいましょう。

テーマフォルダの中にある「style.css」の最後に以下のタグを追加
[css]
/* コメント欄の下にある使用できるタグの表記を消す */
.form-allowed-tags{display:none;}
[/css]

コメント欄の下の文章を変更する場合

もしこのコメント欄の下の文章自体を変更したい場合はfunctions.phpを修正する必要がありますが、子テーマでfunctions.phpを編集する時には注意が必要です。functions.php だけは先に子テーマが読み込まれて次に親テーマが読み込まれるので親テーマからそのままコピーするとエラーになります。もし,親テーマと同じ名前の関数が存在するとエラーとなり,画面が表示されなくなってしまう(真っ白になる)んです。ですので子テーマの functions.php は追加する関数だけを書く必要があります。
[php]
<?php
add_filter("comment_form_defaults","my_special_comment_after");

function my_special_comment_after($args){
$args[‘comment_notes_after’] = ‘ここを好きな文字列に変更する。HTMLコードも有効。’;
return $args;
}
?>
[/php]

コメント自体を受け付けない場合

全般的な設定は「設定」→「ディスカッション」で設定出来ます。
SnapCrab_NoName_2014-1-29_12-13-51_No-00
投稿ごとや固定ページごとに設定することも出来ます。
まず、ダッシュボードの投稿画面に移動します。
arrow11_8d
編集したい投稿・固定ページをチェックボックスで選択します。
arrow11_8d
一括操作というドロップダウンリストから、編集を選択し、適用ボタンをクリックします。
SnapCrab_NoName_2014-1-29_12-14-59_No-00
arrow11_8d
コメント、トラックバック/ピンバック(ブログ投稿のみ)を許可しないに変更して更新をクリック。

【ワードプレス】コピーライトの入れ方と自動更新

フッター部分に、著作権表示で「Copyright(c) 2013-2014 WordPress All Rights Reserved.」
みたいにコピーライト表示をする方法をご紹介します。
やっぱりサイトの著作権表示は大事ですし、何よりかっこよくなります。

WordPress(ワードプレス)なら、このコピーライトの年号の部分をPHPを使って自動更新する事ができるんです。
twenty thirteenであればfooter.phpを以下のように編集します。
他のテーマを使っている場合でもfooter.phpに同じような場所があるはずです。

[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>
[/php]

の部分を下記のものと入れ替えましょう。
「HPやブログを始めた西暦」と記載されている部分に例えば2014年なら半角で2014と入力します。
こちらは時がたっても変化しません。

[php]
Copyright&copy; HPやブログを始めた西暦-
<?php echo date(‘Y’);?>
会社名やサイト名 All Rights Reserved.
[/php]

以上のように設定しておけば、[Copyright© 2014- 2015 manaBIC All Rights Reserved.]
のように西暦の右側だけが自動更新されるので便利です。
ちなみにCo. Ltd.はCompany Limitedの略なので会社でない場合は必要ありません。

センター寄せするなら
[html]
<Div Align="center">サンプル</Div>
[/html]
Centerタグは非推奨なので出来るだけ使わないようにしましょう!(下)
[html]
<Center>サンプル</Center>
[/html]