WordPressによるサイト運営[10] [WordPress]
「ウィジェット」
1.ウィジェットとは
ウィジェットとはさまざまな機能を持ったパーツのようなもの。Web内の指定指定されたエリアにパーツを追加することができる。このひとつひとつのパーツをウィジェットと呼ぶ。ウィジェットは管理画面から行い、ドラッグ&ドロップでできる。最初から13個のウィジェットが用意されている。
2.基本操作
①ウィジェット編集画面
管理画面から「外観」、「ウィジェット」と選択し「ウィジェット管理画面」をだす。
②ウィジェットの無効化
「ウィジェット管理画面」の中央に利用できるウィジェットが並び、右側ペインにウィジェットを表示するエリアと表示するウィジェットが表示されている。ここで表示されているウィジェットを無効化(表示しない)するには、右側ペインのウィジェットを中央の「利用できるウィジェット」エリアにドラッグ&ドロップします。
◆ドラッグ&ドロップ
◆ウィジェットが消える。
◆Web画面からのウィジェットが消える。
③ウィジェットの有効化
有効化は逆の動作を行い「保存」ボタンを押す。
④オプション
タイトル等のオプションも設定したら「保存」ボタンを押す。
⑤表示
Web画面に反映される。
3.テーマにウィジェットを反映
①ウィジェット編集画面
前述のように「ウィジェット管理画面」を開く。
②ウィジェットの有効化
「テキスト」ウィジェットをサイドバー上部のウィジェットエリアにドラッグ&ドロップします。
③ウィジェットタイトルの設定
タイトルを設定し「保存」ボタンを押す。
④ウィジェット内容の設定
テキストエリアに以下の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」
1.投稿の詳細ページに更新日を表示させる
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>
2.作成者のプロフィール情報を表示させる
archive.phpを元にauthor.phpを作成し、get_the_author_metaテンプレートタグでサイト作成者のプロフィール情報を表示させる。プロフィール情報は、WordPressのダッシュボードから「ユーザー」、「ユーザー一覧」、「ユーザー名」をクリックし現れたプロフィールページの「プロフィール情報」の記述内容を取得する。
参考資料
InstallShield ML 「参加方法」 [InstallShield]
Installer 関連 ML への参加に加え、知りたいことズバリのInstalShield MLを見つけたので参加してみました。
1.InstallShield ML Webサイト
以下のサイトからグループに参加できる。YAHOO! JAPANのユーザーIDはすでに持っていたので以下のような表示となっています。ここで「このグループに参加する」ボタンを押します。
2.参加
受信メールアドレスが2つ登録されているので、受信を希望するアドレスを選択して「参加」ボタンを押します。
3.管理者による承認待ち
4.断念
申請して10日が過ぎましたが承認メールが届きません。残念ながらこのMLへの参加を断念することにしました。
引き続き承認メールは待ちの状態としておきますが、承認されても積極的に運用は出来ないなとの感想です。
参考サイト
WordPressによるサイト運営[8] [WordPress]
「固定ページ、その他のテンプレートの作成」
1.固定ページのテンプレートを作成
①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」が表示されるようになった。
2.検索結果ページのテンプレートを作成
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
3.404ページのテンプレートを作成
ページが存在しないときに表示するテンプレートファイル404.phpです。
参考資料
InstallShield Windowsサービスの制御 [InstallShield]
InstallShieldバージョン: 2010
プロジェクトタイプ: 基本のMSIプロジェクト
コンポーネントウィザードを使用して実現する。今回はWindowsサービスの“Remote Registry”の「スタートアップの種類」を「自動」に、「サービスの状態」を「実行」に設定する方法について説明する。
ここでは、InstallShieldの「コンポーネント」を使用する例と、「カスタムアクション」を使用する2つの例を説明する。
本来、「コンポーネント」を利用するのが標準的な方法と思われるが、現状では下記のメッセージでインストールに失敗するため、「カスタムアクション」を利用する方法も併記する。
Ⅰ.コンポーネントを利用する例(エラーで停止)
1.コンポーネントの作成
「編成」、「セットアップのデザイン」または「コンポーネント」を選択する。今回は「セットアップのデザイン」を選択してコンポーネントを作成します。
「セットアップのデザイン」エクスプローラで「TestMSI_WinService_Files」を右クリックし、現れたメニューの「コンポーネントウィザード」を選択する。
2.コンポーネントウィザード
①コンポーネントウィザードへようこそ
「種類を選択してコンポーネントの定義を行う」を選択。
②コンポーネントの種類
コンポーネント名: 適当な名前を入力する。今回はRemoteRegistry
コンポーネントの種類: サービスのコントロール
③サービスの指定
インストール先システムに存在しているサービス
サービス名: Remote Registry
④インストールイベント
「サービスの開始」をチェック
⑤アンインストールイベント
「サービスの停止」をチェック
⑥大気の種類
デフォルトのまま進める
⑦概要
内容確認して進む。
⑧登録完了
3.動作確認
下記エラーメッセージでインストールできず。
Ⅱ.カスタムアクションを利用する例
1.カスタムアクションの作成
① インストールデザイナから「動作とロジック」、「カスタム アクションとシーケンス」、「カスタムアクション」を右クリックします「新しいEXE」、「ディレクトリを参照するパス」と選択します。
②“NewCustumAction1”が出来上がるので適当な名前に変更します。
“NewCustomAction”->“AddRemoteRegistry”
③AddRemoteRegistryのプロパティを以下の内容に設定します。
プロパティ名 | 設定内容 | 説明 |
作業ディレクトリ | SystemFolder | ターゲットシステム上のcmd.exe を使用するため SystemFolder 識別子を使用して、system32 フ ォルダを作業フォルダに指定 |
戻り値の処理 | 同期(終了コードを無視) | |
コマンドライン | cmd.exe /c"net start "Remote Registry"" | |
スクリプト内実行 | 遅延実行(ターミナルサーバーで使用可能) | |
インストール実行シーケンス | 次の後:InstallFiles | |
インストール実行条件 | NOT Installed | 初回インストール時のみ実行される条件 |
④さらに以下の条件でインストール時のロールバック用、アンインストール用、アンインストール時のロールバック用の3つのカスタムアクションも作成します。
◆インストール時のロールバック用 AddRemoteRegistry_RollBack
プロパティ名 | 設定内容 | 説明 |
作業ディレクトリ | SystemFolder | ターゲットシステム上のcmd.exe を使用するため SystemFolder 識別子を使用して、system32 フ ォルダを作業フォルダに指定 |
戻り値の処理 | 同期(終了コードを無視) | |
コマンドライン | cmd.exe /c"net stop "Remote Registry"" | |
スクリプト内実行 | ロールバック実行(ターミナルサーバーで使用可能) | |
インストール実行シーケンス | 次の後:InstallFiles | |
インストール実行条件 | NOT Installed | 初回インストール時のみ実行される条件 |
◆アンインストール用 DeleteRemoteRegistry
プロパティ名 | 設定内容 | 説明 |
作業ディレクトリ | SystemFolder | ターゲットシステム上のcmd.exe を使用するため SystemFolder 識別子を使用して、system32 フ ォルダを作業フォルダに指定 |
戻り値の処理 | 同期(終了コードを無視) | |
コマンドライン | cmd.exe /c"net stop "Remote Registry"" | |
スクリプト内実行 | ロールバック実行(ターミナルサーバーで使用可能) | |
インストール実行シーケンス | 次の後:RemoveDuplicateFiles | |
インストール実行条件 | REMOVE="ALL" | アンインストール時のみ実行される条件 |
◆アンインストール時ロールバック用 DeleteRemoteRegistry_RollBack
プロパティ名 | 設定内容 | 説明 |
作業ディレクトリ | SystemFolder | ターゲットシステム上のcmd.exe を使用するため SystemFolder 識別子を使用して、system32 フ ォルダを作業フォルダに指定 |
戻り値の処理 | 同期(終了コードを無視) | |
コマンドライン | cmd.exe /c"net start "Remote Registry"" | |
スクリプト内実行 | 遅延実行(ターミナルサーバーで使用可能) | |
インストール実行シーケンス | 次の後:RemoveDuplicateFiles | |
インストール実行条件 | REMOVE="ALL" | アンインストール時のみ実行される条件 |
2.動作確認
①サービスの開始確認
インストール完了後にサービス(Remote Registry)を確認すると「開始」となっている。
②サービスの停止確認
アンインストール完了後にサービス(Remote Registry)を確認すると「開始」が消えている。停止している。
以上
WordPressによるサイト運営[7] [WordPress]
「投稿ページのテンプレート化」
single.phpによる投稿ページをテンプレート化することで、現在以下のような表示になっている投稿を、コメントを含めて全文が見られるようにする。
1.タイトルや公開日などをテンプレートタグにする
①ループを設置
投稿を表示している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>
2.全文を表示
the_contentを使い全文を表示する。
<section class="entry-content">
<?php the_content(); ?>
</section>
3.カテゴリー、タグの表示をテンプレート化
投稿が属するカテゴリー、タグの表示をテンプレートタグに置き換える。
<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>
4.複数ページ構成に対するページリンクの設置
wp_link_pagesテンプレートタグで分割されたページ間を移動するページナビゲーションを表示する。
<?php wp_link_pages( 'before=<nav class="pages-link">&after=</nav>&link_before=<span>&link_after=</span>' ); ?>
5.前後記事へのリンクを表示
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>
6.コメント表示をモジュールテンプレート(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]
「一覧表示のテンプレート化」
複数の投稿を一覧表示するアーカイブ表示のテンプレート化を行う。
1.アーカイブのタイトルを表示
single_archieve_titleカスタムテンプレートタグを用いて、カテゴリー名、タグ名、年や月を一括表示する。
<header class="page-header">
<h1 class="page-title"><?php single_archive_title(); ?></h1>
</header>
2.カテゴリーの説明文表示に対応させる
アーカイブのタイトルの下にカテゴリーの説明文も合わせて表示させる。
<?php if ( category_description() ) : ?>
<div class="archive-meta"><?php echo category_description(); ?></div>
<?php endif; ?>
3.ループの組込みとテンプレートタグの置き換え
①ループの組込み
記事をループで括る。
<?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>
4.サイズの違うアイキャッチ画像を表示
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>
5.抜枠を表示
the_exceptテンプレートタグにより冒頭の一部もしくは抜粋専用のテキストを表示する。
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" class="more-link">続きを読む<span class="meta-nav">></span></a>
6.カテゴリーとタグの表示をテンプレート化
the_tagsテンプレートタグでタグを表示する。
<span class="cat-links">カテゴリー:<?php the_category( ', ' ); ?></span>
<span class="tag-links"><?php the_tags( 'タグ:' ); ?></span>
7.ページナビを表示
参考資料
WordPress データインポート方法 [WordPress]
構築中のWordPressテストサイトにデータが登録されていないため、サイトの完成イメージが分かりずらい。そこでここで説明するデータインポート機能を利用してデータを一括登録した。登録されたのは、投稿、固定ページ内容、カテゴリー、タグ、コメント、そして固定ページとそののメニュー等がインポートされた。これにより構築中のサイトイメージがつかみやすくなった。
1.プラグインのインストール
管理画面、「ツール」、「インポート」、「WordPress」を選択する。
インポートツールのインストール画面が現れるので、「今すぐインストール」を押す。
2.インポート
インストールが完了したら「プラグインを有効化してインポートツールを実行」をおす。
「ファイル選択」ボタンを押して、インポートするファイルの選択する。
「ファイルをアップロードしてインポート」ボタンを押す。
新規ユーザを登録するか、既存ユーザーを選択する。またデータのインポートにチェックを入れ、「Submit」ボタンを押す。
インポート成功
3.サイトの表示
参考資料
WordPressによるサイト運営[5] [WordPress]
「トップページをテンプレート化する」
サイトの顔となるトップページをテンプレート化する。下図のように上下2段のウィジェットエリア構成とし、冗談ではテキストウィジェット等を用いた自由な情報の表示、下段はウィジェットの登録が無い場合、最新の投稿を表示する。
①上部のウィジェットエリアを設定
ウィジェットの場所指定に、home-content-widget-upperを使い、wp_widget_num_classを使って、等幅で表示させる。
<?php
if ( is_active_sidebar( 'home-content-widget-upper' ) ) : ?>
<section id="home-widget-area" class="<?php wp_widget_num_class( 'home-content-widget-upper' ); ?>">
<?php dynamic_sidebar( 'home-content-widget-upper' ); ?>
</section>
<?php endif; ?>
②下部のウィジェットエリアの設置とループの組込み
while( have_posts()): と endwhile; でループ処理を組込み最新情報を表示させる。
<section id="update-info">
<?php
if ( ! dynamic_sidebar( 'home-content-widget-lowwer' ) ) :
if ( have_posts() ) :
?><h1 class="update-info-title">information</h1>
<ul>
<?php while ( have_posts() ) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ) :
the_post_thumbnail();
else :
echo '<img src="' . get_default_image( 'default/update-info-thumbnail-default.png' ) . '" alt="" />';
endif; ?>
</a><h2 class="update-title">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
</h2><p class="update-meta">
<span class="entry-date"><a href="<?php the_permalink(); ?>">
<time datetime="<?php the_time( 'Y-m-d' ); ?>"><?php the_time( get_option( 'date_format' ) ); ?></time>
</a></span>
<span class="entry-category"><?php the_category( ', ' ); ?></span>
</p></li>
<?php endwhile; ?>
</ul><?php endif; /* end if have_posts */
endif; /* end if dynamic_sidebar */ ?></section>
③記事へのリンクを設定
the_parmalinkテンプレートタグでループで表示している記事へのリンクを出力する。
<a href="<?php the_permalink(); ?>">
<img src="img/default/update-info-thumbnail-default.png" alt="">
</a>
④アイキャッチ画像を表示
has_post_thumbnailテンプレートタグでアイキャッチ画像が登録されているか確認し、the_post_thumbnailタグを使用してアイキャッチ(投稿サムネイル)画像を表示する。
<a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ) :
the_post_thumbnail();
else :
echo '<img src="' . get_default_image( 'default/update-info-thumbnail-default.png' ) . '" alt="" />';
endif; ?>
</a>
⑤記事タイトルを表示
the_titleタグを使用して記事のタイトルを表示する。
<h2 class="update-title">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
</h2>
⑥公開日を表示
the_timeテンプレートタグで公開日を表示し、get_optionタグで表示フォーマットを指定する。
<p class="update-meta">
<span class="entry-date"><a href="<?php the_permalink(); ?>">
<time datetime="<?php the_time( 'Y-m-d' ); ?>"><?php the_time( get_option( 'date_format' ) ); ?></time>
</a></span>
<span class="entry-category"><?php the_category( ', ' ); ?></span>
</p>
⑦カテゴリーを表示する
the_categoryテンプレートタグで記事の所属するカテゴリーを表示する。
<p class="update-meta">
<span class="entry-date"><a href="<?php the_permalink(); ?>">
<time datetime="<?php the_time( 'Y-m-d' ); ?>"><?php the_time( get_option( 'date_format' ) ); ?></time>
</a></span>
<span class="entry-category"><?php the_category( ', ' ); ?></span>
</p>
⑧トップページの完成
参考資料
Installer 関連 ML 「参加方法」 [InstallShield]
InstallShieldを使っていると、ニュアルやHELPではわからない事が多くWeb調査や実動作での確認で時間がかかることが多い。メーカーのサポートプログラムがあるが、高価なため現状では入ることが困難。いろいろ調べたところ、Installer 関連 ML 見つけたので参加してみました。
1.Installer 関連 ML Webサイト
以下のサイトから参加します。「MLに参加」ボタンを押します。
http://www.freeml.com/ctrl/html/MessageListForm/msi@freeml.com
2.参加
やはりID登録が必要なようです。「マイページをつくる」ボタンを押して「GMOとくとくID」用マイページを作ります。
3.新規マイページ作成
①メールアドレス確認
メールアドレスを入力し「確認メールを送信する」ボタンを押します。
②プロフィール情報
送られてきたメールに記載されているURLをクリックすると「プロフィール情報の登録」ページが現れます。ここにプロフィール情報を入力して先に進みます。
③マイページ作成完了
プロフィール内容確認後、マイページが作成されます。
4.MLの登録
マイページから参加するメーリングリストを探します。
キーワード「installer」で検索します。
見つかりました。
参加します。
参加の確認後、参加が完了しました。
メーリングリストへの参加方法については以上です。過去ログの取得方法については次回書きます。
参考サイト