WP企業サイト制作練習

企業サイト制作の練習をWordPressでしてみましょう。ここでは、テンプレートファイルの使い方とコーポ―レートサイトを作る全手順を紹介しておきます。

WordPressのサイトURL変更方法

  1. WordPress管理画面から設定>一般>サイトURLを希望のURLへ変更
  2. WordPressのインストールされたディレクトリ(今回の例ではWordPressアドレス http://interplan.link/179/webd/) 直下のindex.phpと.htaccessをコピーし、変更後のサイトアドレス直下にペースト
  3. index.phpの記述内容を変更
  4. WordPressの環境をどのディレクトリから読み込むか指定します。

    <?php
    /**
     * Front to the WordPress application. This file doesn't do anything, but loads
     * wp-blog-header.php which does and tells WordPress to load the theme.
     *
     * @package WordPress
     */
    
    /**
     * Tells WordPress to load the WordPress theme and output it.
     *
     * @var bool
     */
    define('WP_USE_THEMES', true);
    
    /** Loads the WordPress Environment and Template */
    require( dirname( __FILE__ ) . '/179/webd/wp-blog-header.php' );
  5. wp-config.phpを書き換える
  6. WordPressのインストールされたディレクトリ直下のwp-config.phpを、下書きプレビューが正しく機能するように下記リンクから認証用キーを取得し、上書きします。

    認証用キーの更新

    認証用ユニークキーの生成

PHPプログラミング応用演習⑥

3限目

テキストp151「メニューに投稿数や投稿日を表示する場合」のコードですが、『リンクが機能する範囲を短くたデザイン』が教科書記載のコードでは上手く動作しません。リンクの範囲を示す($1)</a>の箇所を逆にするとテキスト通りの表示となります。

<?php
//ウィジェット
register_sidebar();

function mymenu_cat($src){
  $src=preg_replace('/<\/a> \((\d+)\)/',' </a>($1)',$src);
  return $src;
}
add_filter('wp_list_categories','mymenu_cat');

function mymenu_month($src){
  $src=preg_replace('/<\/a>&nbsp;\((\d+)\)/', ' </a>($1)',$src);
  return $src;
}
add_filter('get_archives_link','mymenu_month');

?>

さらに… カテゴリーにはホバー時背景白で、月間アーカイブにはホバー時黒文字というイレギュラなパターンの紹介です。a要素がdisplay:blockとなり、背景白の範囲になるので、改めて($1)</a>の箇所を元に戻して、mymenu_monthはそのまま。

<?php
//ウィジェット
register_sidebar();

function mymenu_cat($src){
  $src=preg_replace('/<\/a> \((\d+)\)/',' ($1)</a>',$src);
  return $src;
}
add_filter('wp_list_categories','mymenu_cat');

function mymenu_month($src){
  $src=preg_replace('/<\/a>&nbsp;\((\d+)\)/', ' </a>($1)',$src);
  return $src;
}
add_filter('get_archives_link','mymenu_month');

?>

検証ツールでliに付いているid属性を特定して、style.cssを変更します。※登録したウィジェットの順番等で違いがあります。クラスとidがゴチャついていますが、混乱しないように。

/*カテゴリー*/
.blogmenu li#categories-3 a	{
  display: block;
	padding: 10px 5px;
	color: #666666;
	font-size: 14px;
	text-decoration: none;
}

.blogmenu li#categories-3 a:hover	{
  background-color: #ffffff;
/*
  color: #000;
  text-decoration: underline;
*/
}

/*アーカイブ*/
.blogmenu li#archives-3 a	{
/*
  display: block;
	padding: 10px 5px;
*/
	color: #666666;
	font-size: 14px;
	text-decoration: none;
}

.blogmenu li#archives-3 a:hover	{
/*  background-color: #ffffff;*/
  color: #000;
  text-decoration: underline;
}
.blogmenu li#archives-3 {
  font-size: 12px;
  color: #b6771c;
}

PHPプログラミング応用演習⑤

4限目

固定ページ投稿の違いは、定型のテンプレートを使用するとすぐに分かります。当サイトはtwentyfourteenをベースにカスタマイズしていますが、固定ページとして「予定表」を作成しており、デフォルト設定ではTOPページタイトルバー右にリストされます。

テキストはChapter6で「サイトについて」という説明ページを作成する箇所がありますので、改めて確認できます。WordPressで構成されたコーポレートサイトでは各ページが固定ページとして作成されているのが通常です。機能的な違いはLinkでご確認ください。

PHPプログラミング応用演習④

Bracketsでの編集

テキストに沿ってWordPressのmythemeをカスタマイズしていますが、WordPressの管理画面から外観>テーマの編集>メインインデックスのテンプレート(index.php)と進んで編集することもできますが、これまで通りBracketsから編集することも可能です。
プレビューを行う場合、下記の通りファイル>プロジェクト設定を行う必要があります。

プロジェクト設定

http://localhost/wp/

加えて、bracketsで適切に「フォルダを開く」ことによりサイトの定義(Dreamweaverで行ったように)が行われプレビューが可能となります。※下記表示は円マークがバックスラッシュに読み替えられます。

フォルダを開く

C:\xampp\htdocs\wp\wp-content\themes\mytheme

PHPプログラミング応用演習③

1限目

テキストには記載されていないですが、補足でメール送信について学習しています。

mb_send_mail関数

エンコード変換を行ってメールを送信する。
mbはマルチバイトの略で、引数は下記4種
  

  • $to=”送信先のメールアドレス”;
  • $subject=”件名”;
  • $message=”本文”;
  • $from=”From送信元のアドレス”;
  •   

<?php
session_start();

$text='';
if($_POST){
  $text= 'メールを送信しました';
  $_SESSION['mail']=$text;
$to='';
$subject=$_POST['subject'];
$message=$_POST['message'];
$from='FROM:'.$_POST['email']."\r\n";

mb_language('Japanese');
mb_internal_encoding('UTF-8');

mb_send_mail($to,$subject,$message,$from);
header('Location:mail.php');
exit;
}

if($_SESSION['mail']){
  echo $_SESSION['mail'];
  unset($_SESSION['mail']);
}
?>

<form action="" method="post">
<label>
 <p>※ メールアドレス</p>
 <p><input type="email" name="email" required></p>
</label>
<label>
 <p>※ 件名</p>
 <p><input type="text" name="subject" required></p>
</label>
 <label>
 <p>※ メッセージ</p>
 <textarea name="message" required="required"></textarea>
</label>
  <p><input type="submit" value="送信"></p>

</form>