「WordPressをプラグインでカスタマイズ(ページ作成)」タグアーカイブ

サイトマップ(ページ索引)を作成(PS Auto Sitemap)

サイトのすべての記事一覧を表示したいことがあります。「PS Auto Sitemap」というプラグインを使用してサイトマップ(ページ索引)を作成します。

はじめに

「PS Auto Sitemap」プラグインを使用して、サイトマップ(ページ索引)を作成します。
・「PS Auto Sitemap」をインストール
・「PS Auto Sitemap」を初期設定

「PS Auto Sitemap」をインストール

WordPressのプラグインの管理ページで、「PS Auto Sitemap」プラグインを検索してインストールし、有効化します。
install_psautositemap_001

「PS Auto Sitemap」を初期設定

「PS Auto Sitemap」の初期設定画面を開きます。
setup_psautositemap_001
初期状態を確認します。
setup_psautositemap_002

setup_psautositemap_003

setup_psautositemap_003

setup_psautositemap_004

setup_psautositemap_005

setup_psautositemap_006

サイトマップ用の固定ページを作成し、投稿IDを控えます。
setup_psautositemap_010
設定画面で「投稿ID」を設定します。
setup_psautositemap_009

サイトマップが表示できることを確認します。
setup_psautositemap_011

サイトマップを好みのデザインに変更します。
setup_psautositemap_012

おわりに

「PS Auto Sitemap」プラグインを使用して、サイトマップ(ページ索引)を作成しました。

関連記事(WordPressをプラグインでカスタマイズ(ページ作成))

  1. 日本語の取り扱いを改善(WP Multibyte Patch)
  2. ページにアイコンを表示(Font Awesome 4 Menus)
  3. ソースコードを整形して表示(SyntaxHighlighter Evolved)
  4. パンくずリストを作成(Breadcrumb NavXT)
  5. お問い合わせフォームを作成(Contact Form 7)
  6. サイトマップ(ページ索引)を作成(PS Auto Sitemap)

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

お問い合わせフォームを作成(Contact Form 7)

サイトへのお問い合わせフォームを作成します。「Contact Form 7」というプラグインを使用します。

はじめに

「Contact Form 7」というプラグインを使用して、サイトへのお問い合わせフォームを作成します。
・「Contact Form 7」をインストール
・お問い合わせフォームのショートコードをコピー
・ページにショートコードを設定

「Contact Form 7」をインストール

WordPressのプラグインの管理ページで、「Contact Form 7」プラグインを検索してインストールし、有効化します。
install_contactform7_001

お問い合わせフォームのショートコードをコピー

WordPressのお問い合わせのメニューで「コンタクトフォーム」を選択すると、既に「コンタクトフォーム 1」というフォームが作成済みになっています。そこで、「コンタクトフォーム 1」を選択して、お問い合わせフォームのショートコードをコピーします。
using_contactform7_003

ページにショートコードを設定

投稿ページあるいは固定ページを作成してショートコードを貼り付けます。これだけで、お問い合わせフォームを作成することができます。
using_contactform7_004

<お問い合わせフォームの表示>
using_contactform7_005

おわりに

「Contact Form 7」を使用して、サイトへのお問い合わせフォームを作成しました。

関連記事

  1. 日本語の取り扱いを改善(WP Multibyte Patch)
  2. ページにアイコンを表示(Font Awesome 4 Menus)
  3. ソースコードを整形して表示(SyntaxHighlighter Evolved)
  4. パンくずリストを作成(Breadcrumb NavXT)
  5. お問い合わせフォームを作成(Contact Form 7)
  6. サイトマップ(ページ索引)を作成(PS Auto Sitemap)

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

パンくずリストを作成(Breadcrumb NavXT)

パンくずリストを作成すると、サイト内での記事の位置づけ分かりやすくなり、関連する記事が探しなすくなります。パンくずリストを容易に作成するため「Breadcrumb NavXT」というプラグインを使用します。

はじめに

「Breadcrumb NavXT」というプラグインを使用して、パンくずリストを作成します。
・「Breadcrumb NavXT」をインストール
・「Breadcrumb NavXT」を初期設定
・テンプレートに「Breadcrumb NavXT」のコードを記述
・スタイルシート(style.css)で表示を調整

「Breadcrumb NavXT」をインストール

WordPressのプラグインの管理ページで、「Breadcrumb NavXT」プラグインを検索してインストールし、有効化します。
install_breadcrumnavxt_001

「Breadcrumb NavXT」を初期設定

「Throws SPAM Away」の初期設定画面を開きます。
setup_breadcrumnavxt_001

初回は、以下の画面が表示されます。
setup_breadcrumnavxt_002

ICT実験室では、「General」のタブで以下2か所変更してみました。
・セパレータを変更
・表示中のページのタイトル名をリンク表示

実際に設定変更していきます。

セパレータを「>」から好みの文字に変更します。
setup_breadcrumnavxt_003

見かけをそろえるぐらいの意味しかありませんが、表示しているページをリンクにします。
setup_breadcrumnavxt_004

「変更を保存」ボタンをクリックして、設定を反映します。
setup_breadcrumnavxt_005

テンプレートに「Breadcrumb NavXT」のコードを記述

テンプレート(header.php等)に「Breadcrumb NavXT」の以下のコードを記述します。

<div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

<記述例>
ICT実験室では、パンくずリストの位置を調整するため、class名に「entry-meta」を追加してみました。また、トップページでは表示しないようにしています。

			<?php if ( !is_front_page() ) { ?>
				<div class="breadcrumbs entry-meta"  xmlns:v="http://rdf.data-vocabulary.org/#">
					<?php if(function_exists('bcn_display'))
					{
						 bcn_display();
					}?>
				</div>
			<?php } ?>

スタイルシート(style.css)で表示を調整

スタイルシート(style.css)で文字サイズの変更や、表示位置の調整を行います。

<記述例>

div.breadcrumbs {
    font-size: 12px;
    margin: 1px auto 15px;
    padding: 0;
}

おわりに

「Breadcrumb NavXT」を使用して、パンくずリストを作成しました。パンくずリストがあるとサイト内での移動が直感的にできるようになると感じました。

関連記事

  1. 日本語の取り扱いを改善(WP Multibyte Patch)
  2. ページにアイコンを表示(Font Awesome 4 Menus)
  3. ソースコードを整形して表示(SyntaxHighlighter Evolved)
  4. パンくずリストを作成(Breadcrumb NavXT)
  5. お問い合わせフォームを作成(Contact Form 7)
  6. サイトマップ(ページ索引)を作成(PS Auto Sitemap)

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

ソースコードを整形して表示(SyntaxHighlighter Evolved)

HTMLでソースコードを整形して表示するのは、大変な作業です。「SyntaxHighlighter Evolved」というプラグインを活用します。

はじめに

「SyntaxHighlighter Evolved」というプラグインを使用して、ソースコードを整形して表示します。
・「SyntaxHighlighter Evolved」をインストール
・「SyntaxHighlighter Evolved」を初期設定
・「SyntaxHighlighter Evolved」をCSSでカスタマイズ
・「SyntaxHighlighter Evolved」でソースコードを表示

使用環境

・WordPress      :Version 4.2.3

「SyntaxHighlighter Evolved」をインストール

WordPressのプラグインの管理ページで、「SyntaxHighlighter Evolved」プラグインを検索してインストールし、有効化します。
install_syntaxhighlighter_001

「SyntaxHighlighter Evolved」を初期設定

設定はデフォルトのままで使用します。
install_syntaxhighlighter_002

「SyntaxHighlighter Evolved」をCSSでカスタマイズ

デフォルトのテーマを使用しているので、shThemeDefault.cssをカスタマイズして、配色や行間などの見栄えを整えます。

<shThemeDefault.cssの格納ディレクトリ>
[WordPressのルート]/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles

<変更前>

.syntaxhighlighter {
  background-color: white !important;
}
.syntaxhighlighter .line.alt1 {
  background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #e0e0e0 !important;
}
.syntaxhighlighter .line.highlighted.number {
  color: black !important;
}
.syntaxhighlighter table caption {
  color: black !important;
}
.syntaxhighlighter .gutter {
  color: #afafaf !important;
}
.syntaxhighlighter .gutter .line {
  border-right: 3px solid #6ce26c !important;
}
.syntaxhighlighter .gutter .line.highlighted {
  background-color: #6ce26c !important;
  color: white !important;
}

<変更後>
3行目から5行目で表示位置を整えました。

.syntaxhighlighter {
  background-color: white !important;
  width: 98% !important;
  margin: -0.8em 6px 0.5em !important;
  padding: 8px 0 8px 0 !important;
}
.syntaxhighlighter .line.alt1 {
  background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #e0e0e0 !important;
}
.syntaxhighlighter .line.highlighted.number {
  color: black !important;
}
.syntaxhighlighter table caption {
  color: black !important;
}
.syntaxhighlighter .gutter {
  color: #afafaf !important;
}
.syntaxhighlighter .gutter .line {
  border-right: 3px solid #6ce26c !important;
}
.syntaxhighlighter .gutter .line.highlighted {
  background-color: #6ce26c !important;
  color: white !important;
}

「SyntaxHighlighter Evolved」でソースコードを表示

使用方法は、WordPress上の「SyntaxHighlighter Evolved」の設定の最下部に表示されているので、簡単に調べることができます。
install_syntaxhighlighter_003
基本的な使用方法は、表示するソースコードを使用例のようにタグで囲みます。オプションは、通常「language」オプションで”css”や”php”等、表示するソースコードの言語を指定します。その他は、行を強調する「highlight」でしょうか。ハイライト表示する行番号をカンマ区切りで指定します。タイトル表示を付け加える「title」も使用したくなりましたが、表示を整えるのが大変で断念しました。

<使用例>
using_syntaxhighlighter-evolved_001

おわりに

<表示例>

.comment-reply-title {
	font: 700 normal 14px Osaka-mono, "MS Gothic", monospace;
	text-decoration: underline;
}

「SyntaxHighlighter Evolved」を使用して、ソースコードを整形して表示することができました。気になる点としては、表示速度が若干遅く、整形されたソースコードが表示される前に、Preformattedテキストの表示が見えることが多いです。

補足

「SyntaxHighlighter Evolved」のバージョン:3.1.11

関連記事

  1. 日本語の取り扱いを改善(WP Multibyte Patch)
  2. ページにアイコンを表示(Font Awesome 4 Menus)
  3. ソースコードを整形して表示(SyntaxHighlighter Evolved)
  4. パンくずリストを作成(Breadcrumb NavXT)
  5. お問い合わせフォームを作成(Contact Form 7)
  6. サイトマップ(ページ索引)を作成(PS Auto Sitemap)

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

ページにアイコンを表示(Font Awesome 4 Menus)

Webページにアイコン表示を使用すると効果的なケースが多くあります。「Font Awesome 4 Menus」というプラグインを活用します。

はじめに

「Font Awesome 4 Menus」というプラグインを使用して、アイコンを表示します。
・「Font Awesome 4 Menus」をインストール
・「Font Awesome 4 Menus」を初期設定
・「Font Awesome 4 Menus」を使用してアイコンを表示

使用環境

・WordPress      :Version 4.2.3
・Font Awesome 4 Menues:Version 4.3.0.3

「Font Awesome 4 Menus」をインストール

WordPressのプラグインの管理ページで、「Font Awesome 4 Menus」プラグインを検索してインストールし、有効化します。
install_fontawsom4menus_001

「Font Awesome 4 Menus」を初期設定

WordPressの管理画面で、「設定」-「Font Awesome」を選択して、初期設定画面を開きます。設定を確認しますが、設定はデフォルトのままで使用します。
set_fontawsom4menus_001

「Font Awesome 4 Menus」を使用してアイコンを表示

例として、ホームアイコン「」、上向きの記号「」を「Font Awesome 4 Menus」を使用して、アイコン表示します。

<HTMLでの記載例>

<i class="fa fa-home"></i>
<i class="fa fa-chevron-up"></i>

表示可能なアイコンと表示方法については、以下を参照します。
Font Awesome Icons

おわりに

「Font Awesome 4 Menus」を使用して、アイコンを表示することができるようになりました。

関連記事

  1. 日本語の取り扱いを改善(WP Multibyte Patch)
  2. ページにアイコンを表示(Font Awesome 4 Menus)
  3. ソースコードを整形して表示(SyntaxHighlighter Evolved)
  4. パンくずリストを作成(Breadcrumb NavXT)
  5. お問い合わせフォームを作成(Contact Form 7)
  6. サイトマップ(ページ索引)を作成(PS Auto Sitemap)

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

日本語の取り扱いを改善(WP Multibyte Patch)

WordPressは、日本語に対応していますが、十分対応しきれていない部分も残っています。「WP Multibyte Patch」というプラグインを使用して、日本語の取り扱いを改善します。

はじめに

「WP Multibyte Patch」というプラグインを使用して、日本語の取り扱いを改善します。
・「WP Multibyte Patch」プラグインを有効化

「WP Multibyte Patch」プラグインを有効化

私の環境では、「WP Multibyte Patch」プラグインがインストール済みでしたので、WordPressのプラグインの管理ページで、「WP Multibyte Patch」プラグインを有効化します。
activate_wpmultibytepatch_001

プラグインの有効化だけで動作するようになりますが、どのような機能を持っているかは把握の必要がありますので、プラグインの説明を確認しておきます。
activate_wpmultibytepatch_003

おわりに

「WP Multibyte Patch」というプラグインを使用して、日本語の取り扱いを改善しました。

関連記事

  1. 日本語の取り扱いを改善(WP Multibyte Patch)
  2. ページにアイコンを表示(Font Awesome 4 Menus)
  3. ソースコードを整形して表示(SyntaxHighlighter Evolved)
  4. パンくずリストを作成(Breadcrumb NavXT)
  5. お問い合わせフォームを作成(Contact Form 7)
  6. サイトマップ(ページ索引)を作成(PS Auto Sitemap)

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー