WordPressによるサイト運営[14] [WordPress]
「プラグイン」
１．プラグインとは
WordPressの機能を拡張するための概念であり、そのためのモジュール化された追加プログラム。
試用する場合は、本稼働のサーバーではなく、ローカル環境で試すことが推奨されている。試用後、アンインストールしてもファイルを完全に削除しきれない場合があり本稼働のサーバーに影響を与えることがあるため。。。らしい！
２．管理画面からのインストール
管理画面からインストールできるプラグインは以下のディレクトリに登録されている。
①プラグインの新規追加
管理画面から「プラグイン」、「新規追加」と選択する。
②プラグインの検索
キーワード検索欄に”WPtouch”と入力し「プラグインの検索」ボタンを押す。するとキーワードの一致したプラグインが表示されるので、希望のプラグインの「今すぐインストール」を押す。
③インストール
インストールの確認画面が出るので「OK」ボタンを押す。
④有効化
インストールが成功すると以下の画面が現れるので「プラグインを有効化」ボタンを押す。
⑤確認
プラグインが追加された。
３．FTPを利用したインストール
公式プラグイン以外で配布されているプラグインはFTPを使ってインストールと有効化を行う。
①アップロード
ダウンロードしたプラグインをWordPressフォルダのwp-content\pluginsフォルダー内に任意のフォルダーを作成しFTPでアップロードする。今回はwptouchフォルダーを作成しその中にアップロードする。
wordpress\wp-content\plugins\wptouch
②アップロード確認
サーバーにプラグインフォルダーをアップロードすると、「インストール済みプラグイン」一覧に表示される。
③有効化
「有効化」ボタンを押してプラグインを有効化する。
４．ZIP形式のプラグインインストール
テーマのインストールと同様に、管理画面からインストールする方法もある。
参考資料
WordPressによるサイト運営[13] [WordPress]
「EXERCISE」
１．ウィジェットの追加
フッターウィジェットエリアにウィジェットを追加する。
①設定
管理画面から「外観」、「ウィジェット」を選択し「ウィジェット」画面を表示する。
②フッターウィジェットエリア
ここでフッターエリアとして利用できるウィジェットエリアが４個用意されているので、[▼]ボタンを押してそれぞれを展開する。
③登録
「試用できるウィジェット」から表示したいウィジェットを「フッターのウィジェットエリア」にドラッグ＆ドロップする。それぞれドラッグ＆ドロップしたら「登録」ボタンを押す。
④表示画面
４つのウィジェットがフッターエリアに追加された。
２．グローバルナビに外部リンクを追加
①設定
管理画面から「外観」、「メニュー」を選択し「ウィジェット」画面を表示する。
②メニュー編集
「メニュー編集」タブから「編集するメニュー」を”global”を表示し「選択」ボタンを押す。次に「リンク」を選択し「URL」に”gihyo.jp”「インクテキスト」に”Gihyo.jp”と入力し「メニューに追加」ボタンを押す。メニュー構造に”Gihyo.jp”が追加されたら「メニューを保存」ボタンを押す。
③表示画面
”Gihyo.jp”へのリンクが追加された。
参考資料
WordPressによるサイト運営[12] [WordPress]
「カスタムヘッダー/サイトタイトル画像」
１．カスタムヘッダーとは
ヘッダー画像を管理画面から変更することができる。これはテンプレートファイルを編集することなく、画像を変更することができる。
２．基本操作
①ヘッダー編集画面
設定は管理画面から「外観」、「ヘッダー」を選択する。
②ヘッダー画像の設定
「デフォルト画像」から希望の画像を選択して「変更を保存」ボタンを押す。
③表示
Webサイトを表示する。
３．アップロード画像をヘッダー画像として利用
①画像のアップロード
アップロードするファイルを選択しアップロードする。
②画像のトリミング
ファイルをアップロードすると表示する部分をトリミングする画面となる。ここで表示する部分を選択し「切り取って公開する」ボタンを押す。
③表示
Webサイトを表示する。
４．サイトタイトル画像を変更
サイトタイトルをテキストから画像に変更することが出来る。
①画像のアップロード
カスタムヘッダー編集画面の下にある、「サイトタイトル画像」から表示する画像ファイルを選択しアップロードする。
②表示
Webサイトを表示する。
参考資料
WordPress ダウンロードしたプラグインのインストール方法 [WordPress]
社内のＰＣ上に構築したXAMPPでWordPressを動かし、WordPress Importerを起動しても以下のエラーとなってしまう。
これは、プロキシを乗り越えられないと考えられるが、いったい何に対して設定すればよいのか分からないため（XAMPP, Apache それともWordPress？）、対応策を調査し設定するには時間がかかりそうである。
そこでWebを検索していくとプラグインをダウンロードしてからインストールする方法があったので実施してみた。
１．WordPress Importerのダウンロード
以下のサイトからファイルをダウンロードする。現時点での最新バージョンのZIPファイル（wordpress-importer.0.6.1.zip）がダウンロードされるので適当な場所に保存しておく。
２．インストール
①管理画面から「プラグイン」、「新規追加」を選択する。
②プラグインのインストール画面から「アップロード」を選択する。
③「ファイルを選択」ボタンを押してダウンロードしたZIPファイルを選択する。
④「いますぐインストール」ボタンを押す。
⑤インストールが完了したら、「プラグインを有効化」を押す。
⑥有効化されたらOK
３．確認
「ツール」、「WordPress」を押しWordPressのデータをインポートを行う。
インポートファイル選択画面が現れたので成功です。
参考サイト
WordPressによるサイト運営[11] [WordPress]
「カスタムメニュー」
１．カスタムメニューとは
管理画面からWebサイトのナビゲーションを編集できる機能。
２．基本操作
①編集画面
管理画面から「外観」、「メニュー」を選択する。
②メニューの作成
メニュー画面から「メニューの名前」をglobalとし、「メニュー作成」ボタンを押す。
③メニューの項目追加
「メニューを編集」タグ「固定ページ」からメニューに表示させるページを選択し、「メニューに追加」ボタンを押す。
メニュー構造にメニューが追加される。
④階層の調整
メニューの階層構造はドラッグ＆ドロップで移動させ、最後に「メニューを保存」ボタンを押す。
⑤表示エリアの設定
「位置の管理」タグを選択し、グローバルナビに今作成した、globalを選択し「変更を保存」ボタンを押す。
⑥表示
今作成したglobalメニューが表示される。
３．Webサイトのメニューを設定
このテーマではメニューを「ヘッダー」、「グローバル」、「フッター」の3つのエリアに表示できるので、ここで設定する。
①ホームへのリンクを追加
メニューにホーム（このWebサイト）へのリンクを設定する。「メニュー編集」タグから、「固定ページ」、「全てを表示」タグ、「ホーム・ホーム」にチェックし「メニューに追加」ボタンを押す。
②ナビゲーションラベルの変更
ホームがメニューに追加されたので、[▼]オプションボタンを押し、「ナビゲーションラベル」にHomeと入力する。
③カテゴリーへのリンク追加
「メニューを編集」タグ、「カテゴリー」、「全てを表示」、「News」をチェックし「メニューに追加」ボタンを押す。
④グローバルナビの完成
グローバルナビの構成が完成したので「メニューに追加」ボタンを押す。
⑤メニューの追加
次にヘッダーメニューを作成します。「メニュー編集」タグから「新規メニューを作成」を押し、「メニューの名前」をheaderとする。
⑥ヘッダーナビ
グローバルナビと同様にメニューに表示したい項目を追加し「メニューを保存」ボタンを押す。
⑦フッターナビ
フッター用も同様にメニューを作成する。
⑧表示
「位置の管理」タグを選択し、「ヘッダーナビ」にｈｅａｄｅｒ、「フッターナビ」にfutterを選択し「変更を保存」ボタンを押す。
最終的に完成したのが以下となる。
参考資料
WordPressによるサイト運営[10] [WordPress]
「ウィジェット」
１．ウィジェットとは
ウィジェットとはさまざまな機能を持ったパーツのようなもの。Web内の指定指定されたエリアにパーツを追加することができる。このひとつひとつのパーツをウィジェットと呼ぶ。ウィジェットは管理画面から行い、ドラッグ＆ドロップでできる。最初から13個のウィジェットが用意されている。
２．基本操作
①ウィジェット編集画面
管理画面から「外観」、「ウィジェット」と選択し「ウィジェット管理画面」をだす。
②ウィジェットの無効化
「ウィジェット管理画面」の中央に利用できるウィジェットが並び、右側ペインにウィジェットを表示するエリアと表示するウィジェットが表示されている。ここで表示されているウィジェットを無効化（表示しない）するには、右側ペインのウィジェットを中央の「利用できるウィジェット」エリアにドラッグ＆ドロップします。
◆ドラッグ&ドロップ
◆ウィジェットが消える。
◆Web画面からのウィジェットが消える。
③ウィジェットの有効化
有効化は逆の動作を行い「保存」ボタンを押す。
④オプション
タイトル等のオプションも設定したら「保存」ボタンを押す。
⑤表示
Web画面に反映される。
３．テーマにウィジェットを反映
①ウィジェット編集画面
前述のように「ウィジェット管理画面」を開く。
②ウィジェットの有効化
「テキスト」ウィジェットをサイドバー上部のウィジェットエリアにドラッグ＆ドロップします。
③ウィジェットタイトルの設定
タイトルを設定し「保存」ボタンを押す。
④ウィジェット内容の設定
テキストエリアに以下のHTMLを入力し「保存」ボタンを押す。
<p>東京都新宿区市谷左内町xx-xx<br />TEL 03-1234-5678</p>
<ul>
<li>日・火～木 11:00～18:00<br />（ラストオーダー 17:00）</li>
<li>金 ・土 11:00～21:00<br />（ラストオーダー19:30)</li>
<li>※月曜定休日（祝日の場合、翌日）</li>
</ul><a href="/shop-info/">
<img src="http://maps.google.com/maps/api/staticmap?center=35.692664,139.735949&zoom=15&size=170x120&markers=size:small|35.693465,139.735638&sensor=false" alt="アクセスマップ" width="170" height="120" />
</a><a href="http://twitter.com/" class="twitter-btn">follow</a>
⑤表示
テキスト情報とGoogleマップおよびTwitterのボタンが追加されました。
参考資料
WordPressによるサイト運営[9] [WordPress]
「EXERCISE」
１．投稿の詳細ページに更新日を表示させる
single.phpを編集してthe_modified_datテンプレートタグで更新日を表示させる。
<span class="sep">
<time class="modified-date" datetime="<?php the_modified_date( 'Y-m-d' ); ?>">
<?php the_modified_date( get_option( 'date_format' ), '更新日：' ); ?>
</time>
</span>
２．作成者のプロフィール情報を表示させる
archive.phpを元にauthor.phpを作成し、get_the_author_metaテンプレートタグでサイト作成者のプロフィール情報を表示させる。プロフィール情報は、WordPressのダッシュボードから「ユーザー」、「ユーザー一覧」、「ユーザー名」をクリックし現れたプロフィールページの「プロフィール情報」の記述内容を取得する。
参考資料
WordPressによるサイト運営[8] [WordPress]
「固定ページ、その他のテンプレートの作成」
１．固定ページのテンプレートを作成
①page.pgpの作成
固定ページはpage.phpを作成します。固定ページの表示は、投稿用のsingle.phpの表示とほぼ変わりない。single.phpをコピーして不要な部分を削除することで作成が可能。
②h1タグのclass
page_titleクラスを設定する。
<h1 class="page-title"><?php the_title(); ?></h1>
③投稿日、投稿者の表示を削除
公開日、作成者の表示部を削除する。
<header class="entry-header">
<h1 class="page-title"><?php the_title(); ?></h1>削除
</header>
④カテゴリー、タグの表示を削除
カテゴリーとタグ表示部の削除
⑤前後リンクのソースを削除
previous_post_link, next_post_link部のコードを削除。
⑥固定ページの表示
固定ページ「Menu」「Shjop Info」「Staff」が表示されるようになった。
２．検索結果ページのテンプレートを作成
search.phpを作成し、get_template_partテンプレートタグを使ってarchive.phpを読み込む。
<?php get_template_part( 'archive' );
http://kazu-oyaji.com/wp/?s=%E3%83%9F%E3%83%A9%E3%83%83%E3%82%B8%E3%82%AA
３．404ページのテンプレートを作成
ページが存在しないときに表示するテンプレートファイル404.phpです。
参考資料
WordPressによるサイト運営[7] [WordPress]
「投稿ページのテンプレート化」
single.phpによる投稿ページをテンプレート化することで、現在以下のような表示になっている投稿を、コメントを含めて全文が見られるようにする。
１．タイトルや公開日などをテンプレートタグにする
①ループを設置
投稿を表示しているarticleタグをループで括る。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="hentry">
<header class="entry-header">
<h1 class="entry-title">「谷川俊太郎の庭」展</h1>中略
</div><!-- #respond -->
<!--/* ▼ #comments 終了 */-->
</section>
<!--/* ### comments.php 終了 ### */-->
<?php endwhile; endif; ?>
②post_classタグ
post_classテンプレートタグでCSSで投稿の表示ができるようにする。
<article <?php post_class(); ?>>
③タイトル、投稿日、投稿者をテンプレートタグで置き換える
the_title, the_time, the_author を使う。
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1><div class="entry-meta">
<span class="sep">投稿日：<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<time class="entry-date" datetime="<?php the_time( 'Y-m-d' ); ?>" pubdate="<?php the_time( 'Y-m-d' ); ?>">
<?php the_time( get_option( 'date_format' ) ); ?>
</time>
</a></span>
<span class="author vcard">投稿者：<a title="<?php the_author(); ?>" href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" class="url fn n">
<?php the_author(); ?>
</a></span>
</div>
</header>
２．全文を表示
the_contentを使い全文を表示する。
<section class="entry-content">
<?php the_content(); ?>
</section>
３．カテゴリー、タグの表示をテンプレート化
投稿が属するカテゴリー、タグの表示をテンプレートタグに置き換える。
<footer class="page-footer">
<div class="entry-meta">
<span class="cat-links">カテゴリー：<?php the_category( ', ' ); ?></span>
<span class="tag-links"><?php the_tags( 'タグ：' ); ?></span>
</div>
</footer>
４．複数ページ構成に対するページリンクの設置
wp_link_pagesテンプレートタグで分割されたページ間を移動するページナビゲーションを表示する。
<?php wp_link_pages( 'before=<nav class="pages-link">&after=</nav>&link_before=<span>&link_after=</span>' ); ?>
５．前後記事へのリンクを表示
previous_post_link, next_post_linkテンプレートタグで表示中の記事の前後記事へのリンクを表示する。
<nav class="navigation" id="nav-below">
<ul>
<?php previous_post_link( '<li class="nav-previous">%link</li>', '%title', true ); ?>
<?php next_post_link( '<li class="nav-next">%link</li>', '%title', true ); ?>
</ul>
</nav>
６．コメント表示をモジュールテンプレート（comments.php）として切り出す
①コメント表示部分を置き換える
記事に対するコメントの表示部分をモジュールテンプレートファイルcomments.phpとしcomments_templateテンプレートタグで呼び出す。
<?php comments_template( null, true ); ?>
②パスワード保護された投稿への対応
投稿がパスワード保護されている場合、表示しないようにpost_password_requiredのパスわーワード保護有無の判定結果により分岐処理を行う。
<section id="comments">
<!--/* ▲ #comments 開始 */-->
<?php if ( post_password_required() ) : ?>
<p class="nopassword">このページはパスワード認証が必要です。パスワードを入力してご覧ください。</p>
</section><!-- #comments -->
<?php
return;
endif;?>
③コメントがない場合は非表示
have_commentsでコメントの有無を判別し分岐処理を行う。
<?php if ( have_comments() ) : ?>
中略
<?php endif; ?>
④コメントの件数を表示
get_comments_numberテンプレートタグでコメント数を取得する。
<h1 id="comments-title">"<em><?php the_title(); ?></em>" に<?php echo number_format_i18n( get_comments_number() ); ?>件のコメント</h1>
⑤複数ページになる場合のナビゲーションを設定
previous_comments_link, next_comments_linkテンプレートタグで「古い」コメントページと「新しい」コメントページのリンクを表示する。
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
<nav class="navigation">
<ul>
<li class="nav-previous"><?php previous_comments_link( '古いコメント' ); ?></li>
<li class="nav-next"><?php next_comments_link( '新しいコメント ' ); ?></li>
</ul>
</nav><!-- .navigation -->
<?php endif; ?>
⑥コメントを表示
wp_list_commentsテンプレートタグでコメントを表示する。
<ol class="commentlist">
<?php wp_list_comments( array( 'callback' => 'miraggio_comment' ) ); ?>
</ol>
⑦コメント入力フォームの表示
comment_formテンプレートタグで状況に応じたコメントフォームを表示させる。
<?php comment_form(); ?>
⑧comments.phpの完成
参考資料
WordPressによるサイト運営[6] [WordPress]
「一覧表示のテンプレート化」
複数の投稿を一覧表示するアーカイブ表示のテンプレート化を行う。
１．アーカイブのタイトルを表示
single_archieve_titleカスタムテンプレートタグを用いて、カテゴリー名、タグ名、年や月を一括表示する。
<header class="page-header">
<h1 class="page-title"><?php single_archive_title(); ?></h1>
</header>
２．カテゴリーの説明文表示に対応させる
アーカイブのタイトルの下にカテゴリーの説明文も合わせて表示させる。
<?php if ( category_description() ) : ?>
<div class="archive-meta"><?php echo category_description(); ?></div>
<?php endif; ?>
３．ループの組込みとテンプレートタグの置き換え
①ループの組込み
記事をループで括る。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="hentry">
<header class="entry-header">
中略
</footer>
</article>
<?php endwhile; endif; ?>
②タイトル、投稿日をテンプレートタグに置き換える
the_titleタグでタイトル、the_timeタグで登校日を表示させる。
<header class="entry-header">
<h1 class="entry-title">
<a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h1>
<div class="entry-meta">
<span class="sep">投稿日：<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<time class="entry-date" datetime="<?php the_time( 'Y-m-d' ); ?>" pubdate="<?php the_time( 'Y-m-d' ); ?>">
<?php the_time( get_option( 'date_format' ) ); ?>
</time>
</a></span>
中略</div>
</header>
③投稿者をテンプレートタグに置き換える
the_authourテンプレートタグで作成者名を表示する。get_authour_posts_url タグと get_the_authour_meta(‘ID’)で作成者名アーカイブのリンクを得ている。
<span class="author vcard">投稿者：<a title="<?php the_author(); ?>" href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" class="url fn n">
<?php the_author(); ?>
</a></span>
４．サイズの違うアイキャッチ画像を表示
get_post_thumnailタグのパラメータで、大きなサイズのアイキャッチ画像を表示する。
<p><a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ) :
the_post_thumbnail( 'large_thumbnail' );
else :
echo '<img src="' . get_default_image( 'default/post-thumbnail-default.png' ) . '" class="attachment-large_thumbnail wp-post-image" alt="" />';
endif; ?>
</a></p>
５．抜枠を表示
the_exceptテンプレートタグにより冒頭の一部もしくは抜粋専用のテキストを表示する。
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" class="more-link">続きを読む<span class="meta-nav">></span></a>
６．カテゴリーとタグの表示をテンプレート化
the_tagsテンプレートタグでタグを表示する。
<span class="cat-links">カテゴリー：<?php the_category( ', ' ); ?></span>
<span class="tag-links"><?php the_tags( 'タグ：' ); ?></span>
７．ページナビを表示
参考資料
