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

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

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

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

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

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

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

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

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

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

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

style.cssにコード追加

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

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

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

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

「Custom Post Type UI」の設置

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

新しい投稿タイプの作成

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

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

ショートコードの作成

固定ページに新着情報を表示させるためにはショートコードが必要ですので以下の手順で作成します。
「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]を埋め込みます。

記事の投稿

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

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

フォームの修正

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

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

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

「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;
}

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

フォームに追加

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

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

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

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

メールに追加項目を反映

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

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

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

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

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

Contact Form 7の設定

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

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

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

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

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

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

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

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

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

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

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

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

.......

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

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

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

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