3.カレンダーに本日のイベント欄を入れる

ここではカレンダーの下部に本日のイベントを表示する処理を追加する処理をご説明します。
修正する手順は「2.カレンダーの土日に色を付ける」とほぼ同じでファイル「class-eo-calendar-widget.php」を修正します。

class-eo-calendar-widget.phpにコード追加

ファイルを修正するときはFTP等でパソコン側にダウンロードしましょう
以下のディレクトリに対象ファイルがあります。

自サイトのホーム/wp-content/plugins/class-eo-calendar-widget.php

見ずらいですのでコピペしてテキストエディタあたりで見てください。
コメントで「本日イベント表示処理」と入っている箇所が追加したコードです。

表示はこんな感じです。
「本日(3/26):営業日」が追加した部分になります。
011

かんぱに☆ガールズ オンラインゲーム

2.カレンダーの土日に色を付ける

Event Organiserの初期設定では土日は色分け表示してくれません。
(イベントが追加出来て土日を色分けできる無料プラグインが見つかりませんでした、情報求む)
という事でコードを追加することにしました。

class-eo-calendar-widget.phpにコード追加

ファイルを修正するときはFTP等でパソコン側にダウンロードしましょう
以下のディレクトリに対象ファイルがあります。

自サイトのホーム/wp-content/plugins/class-eo-calendar-widget.php

見ずらいですのでコピペしてテキストエディタあたりで見てください。
コメントで「曜日別処理追加」と入っている箇所が追加したコードです。

style.cssにコード追加

土日の背景色を設定するコードを追加します。

.sunday {
	background-color: #ffd9db;
}
.saturday {
	background-color: #dbffff;
}

これでカレンダーの土日が色分けされて表示されます。
011

かんぱに☆ガールズ オンラインゲーム

標準の投稿とは別に新着情報を作る

標準とは別の投稿を作りたい時は、どのような時かといいますと、当サイトでは投稿で記事を作成しております。
こうなるとサイト自体の新着情報を作りたい時にワードプレス講座の投稿とごちゃごちゃになってしまいますので分ける必要性が出てきますので、分けて作成してみました。

「Custom Post Type UI」の設置

直接コードを書き込みしても出来ますが非効率的ですのでプラグインをインストールします。
ダッシュボード→「プラグイン」→「新規追加」で「Custom Post Type UI」を検索してインストールします。(詳細は省きます)

新しい投稿タイプの作成

ダッシュボードメニューに「CPT UI」が追加されますので「CPT UI」→「Add/Edit Post Type」を選択します。
030

例として「新着情報」を追加しますので以下のように入力して登録してみました。
031

ショートコードの作成

固定ページに新着情報を表示させるためにはショートコードが必要ですので以下の手順で作成します。
「function.php」の最下行に以下のコードを追加します。

/* 新着情報出力のショートコード */
function fncOutNews() {
  echo '<div >';
  $posts = get_posts('post_type=news');
  global $post;

  foreach ($posts as $post): setup_postdata($post);
    echo '<h4>' . get_the_date() . '</h4>';
    echo '<h4>' . the_title() . '</h4>';
    echo '<div >' . the_content() . '</div>';
  endforeach;
  echo '</div>';

  return;
}
add_shortcode('post_news', 'fncOutNews');
  • 最終行の「post_news」がショートコードになります。
  • 「fncOutNews」は呼び出される関数名になります。
  • 関数内の「get_posts(‘post_type=news’)」の引数には「新しい投稿タイプの作成」で設定したスラッグ名’news’を入れます。
固定ページにショートコードを埋め込む

あらかじめ新着情報表示用の固定ページを作っておきましょう。
そこの固定ページに[fncOutNews]を埋め込みます。
032

記事の投稿

ダッシュボードの投稿メニューに「新着情報」(⇐例では)が追加されますので既存の投稿と同じ感覚で投稿します。

実際の表示はこんな感じです。
034

かんぱに☆ガールズ オンラインゲーム

2.トラッキングコードを埋め込む

Google Analyticsのトラッキングコードを自サイトに埋め込みます。
プラグイン「All In One SEO Pack」を使用すると、とても簡単です。

「All In One SEO Pack」の導入

導入と設定の詳細は下記サイトをご参考下さい。
http://bazubu.com/all-in-one-seo-pack-23836.html

「All In One SEO Pack」にトラッキングIDを入れる

ダッシュボード→「All In One SEO Pack」→「General Settings」の設定画面を開きます。
下のほうにスクロールしていくと「Google Settings」の欄に

  • Google アナリティクスID(自分のIDを入れる)
  • Use Universal Analytics
  • Advanced Analytics Options

がありますので下記のように設定し更新します。
029

かんぱに☆ガールズ オンラインゲーム

1.Google Analyticsの登録

ホームページを開設したら、日々のアクセス数や検索キーワードの解析は必要不可欠ですよね。
レンタルサーバーに搭載している解析ツールもありますが(少なくとも当ホームページで使用している連らるサーバーは)とても使いずらく、解析内容も大雑把です。

そこでお勧めなのが「Google Analytics(グーグル アナリティクス)」です。
有料の解析ツールと遜色ないくらい高機能のツールです。

Googleアカウントの登録

Google Analyticsを使用するにはGoogleアカウントが必要です。
まだ未登録の場合、下記サイトから登録します。
https://www.google.co.jp/

Google Analyticsの導入

下記サイトにgoogleアカウントでログインします。
https://www.google.com/intl/ja_JP/analytics/

画面のガイダンスに従い登録できると思いますが、手順がわからない方は下記サイトをご参考下さい。
http://www.adminweb.jp/analytics/setup/index1.html

かんぱに☆ガールズ オンラインゲーム

3.デザインの修正

フォームの修正

ダッシュボード→「問合せ」→「コンタクトフォーム」で「コンタクトフォーム1」の編集画面を開きます。
022

フォームのタブにidを追加し「style.css」にスタイルを定義することも出来ますし、「style=”…”」で直接スタイルを定義することも出来ます。
018

また「*」を付けると必須項目にすることが出来ます。
019

「style.css」の例はこんな感じに追加します。

#text01{
background:url("./images/text01.png");
-moz-background-size:100% 100%;
background-size:100% 100%;
}
#text02{
background:url("./images/text02.png");
-moz-background-size:100% 100%;
background-size:100% 100%;
}
#text03{
background:url("./images/text03.png");
-moz-background-size:100% 100%;
background-size:100% 100%;
width: 325px;
ime-mode: active;
}
かんぱに☆ガールズ オンラインゲーム

2.入力項目を追加する

例として住所を追加してみます。

フォームに追加

ダッシュボード→「問合せ」→「コンタクトフォーム」で「コンタクトフォーム1」の編集画面を開きます。
022

今回はテキストボックスを追加しますので「テキスト」をクリックします。
025

名前は半角英文字で入力、必要に応じてID、クラスも入力します。
026

お問い合わせページに住所の項目が追加されます。
027

メールに追加項目を反映

コンタクトフォームの修正画面でメールのほうにも項目を追加しましょう。
028

かんぱに☆ガールズ オンラインゲーム

1.プラグインの設置

お問い合わせフォームを作るのにお勧めのプラグインは「Contact Form 7」です。
簡単に設置でき、デザインのカスタマイズも可能です。

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

ダッシュボード→「プラグイン」→「新規追加」で「Contact Form 7」を検索してインストールします。(詳細は省きます)

インストール後にダッシュボードに「お問い合わせ」が追加されます。
018

Contact Form 7の設定

ダッシュボード→「お問い合わせ」→「コンタクトフォーム」」→「コンタクトフォーム1」の編集で設定画面を開きます。
022

メールタブの中に送信先のメールアドレスを指定する欄がありますので、設定します。
その他の項目もお好みで設定して下さい。
024

ショートコードがありますので、こちらの文字列をクリップボードにコピーしましょう。
019

先程、コピーしたショートコードを「お問い合わせ」を表示したいページに貼り付けます。
020

実際の表示は、こんな感じです。
021

かんぱに☆ガールズ オンラインゲーム

モバイル表示のデザイン修正

レスポンシブ対応のテーマを使用していてもモバイル表示にした場合、どうしてもはみ出してしまう部分や、見やすくするために非表示にしたい部品が出てくると思います。
そんな時はスクリーンのピクセル別にcssを設定しましょう。

「style.css」にコードを追加

ダッシュボード→「外観」→「テーマの編集」で「style.css」を選択し、エディタの画面を開きます。
割と下の部分に「@media screen and (min-width: 9999px)」の記述がありますので、スクリーンの大きさ別にcssのコードを追加します。
ちなみにカッコの中のピクセルの数値より小さい場合、ブロック内のスタイルが適用されます。
015

例)モバイル表示の場合、サイドバーを非表示にする

スクリーン幅が1008pxより小さいモバイル画面の場合に適用

@media screen and (min-width: 1008px) {

  #content-sidebar {
    visibility: hidden; /* 非表示 */
  }

.......

同じような感じコードを追加すれば幅を調整したり画像サイズを変更したりの出来ます。

例)モバイル画面の表示確認

それぞれの機種により画面サイズも違ってきますので、テスト機を機種別に用意するのは難しいでしょう。
表示テストにはブラウザの「Google Chrome」を使用すると便利です。
右上のボタンから「その他ツール」→「デベロッパーツール」を選択します。
016

モバイルのアイコンをクリックしリストから機種を選択すると、その機種での画面表示に切り替わります。
017

かんぱに☆ガールズ オンラインゲーム