読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

予約システム

時間単位で予約できる予約ページを作成 プラグイン「MTS Simple Booking予約システム」をインストールする 予約システムの設定 各種設定 詳細設定をしておく 予約パラメータ カレンダーを表示する 受付を作成直後からにする 予約受付期間 当日から何ヶ月先ま…

超簡単デプロイ

WordPressのデプロイ ロカールのデータをリモートに移して正しく表示させる ローカルからのバックアップ 「ツール」→「全てをエクスポート」(例:wordpress.xml) 「wp-content」→「uploads」フォルダー 「wp-content」→「themes」→「mytheme」 リモートサ…

前後の記事へのリンクを追加

前後の記事へのリンクを追加 リンクを示すアイコンは、「アイコンフォント(Font Awesome)」を使って表示する 前後の記事の個別ページへのリンクを出力する <div class="navlink"> <span class="navlink-prev"> </span> <span class="navlink-next"> </span> </div> 前後を示すアイコンを削除 …

記事の個別ページを作成

記事の個別ページを作成 single.phpテンプレートを編集し、記事の個別ページを作成します ページの構成要素 ページの構成要素を用意します HTML5では、ISO8601形式のデータも必要になりますので、パラメータを「c」と指定したものも用意します 《single.php…

基本的な仕組み

WordPressの基本的な仕組み ページの構成要素(コンテンツ)を投稿します データベースで管理します テンプレートでWebページを出力します サイトを構築します <article> <h1></h1> </article> コ…

カスタマイズ - ニュース・お知らせページを作成

WordPressの機能を使わずにページ作成 WordPressの機能は使わずに、HTML+CSSだけで「最新ニュース」と「過去のニュース」のページを作成します 最新ニュースのページ「top.html」 過去のニュースのページ(月別)「month.html」 《top.html》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ニュース</title> <link rel="stylesheet" href="style.css"> </link></meta></head></html>

予約システム

時間単位で予約できる予約ページを作成 プラグイン「MTS Simple Booking予約システム」をインストールする 予約システムの設定 各種設定 詳細設定をしておく 予約パラメータ カレンダーを表示する 受付を作成直後からにする 予約受付期間 当日から何ヶ月先ま…

wp_headerとwp_footerを追加する

WordPressのテーマ作成では必須 と を追加する </head> </body> これで、ログインしている時のみ、管理バーが表示されるようになります。 管理バーを非表示にする 「サイトをみるときにツールバーを表示する」のチェックを外す

ヘッダーとフッターを表示する

ヘッダーを表示する サイト名を表示する <body <?php body_class(); ?>> <h1><a href="<?php echo home_url(); ?>"></a></h1> <div class="container"> サイトの説明を表示する <body <?php body_class(); ?>> <h1><a href="<?php echo home_url(); ?>"></a></h1> <p></p></body></div></body>

トップページのデザインを指定する

トップページのデザインを指定する 記事の間隔を広くする /* 記事 */ article { margin-bottom: 40px; } 記事のタイトルを黒色にする /* 記事 */ article h1 a { color: #000; text-decoration: none; } 横幅の最大値を指定する .container { max-width: 650…

トップページを表示する

前後の記事へのリンクを出力しないようにする 前後の記事へのリンクを個別ページのみ出力するようにする <div class="pagenav"> <span class="old"> </i> %title'); ?> </span> <span class="new"> </span>

前後の記事へのリンクを表示する

前後の記事へのリンクを表示する class名を「pagenav」「old」「new」とする <div class="pagenav"> <span class="old"> </span> <span class="new"> </span> </div> </article> 矢印をアイコン表示する リンクのパラメーターを「%link」と指定し、前後に矢印記号を挿入します

アイコンを付けてデザインする

アイコンフォントを利用できるようにする http://fortawesome.github.io/Font-Awesome/ [ɔ:səm] すばらしい、cool CDN http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css アイコンを表示する bootstrapの指定は、class名で指定する …

記事の投稿日とカテゴリーを表示する

日付の設定 記事の投稿日を表示する 記事タイトルの下に表示させる <h1></h1> 記事の投稿日をマークアップする HTML5新要素「<time>〜</time>」でマークアップする <time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>"> </time> 記事が属するカテゴリーを表示する

記事の個別ページを作成

index.phpを編集する 基本構造の入力 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページタイトル</title> </head> <body> </body> </html> WordPressのテンプレートタグ 記事タイトルを表示 記事本文を表示 これだけだと、どの記事を表示するかの指定がないため、表示されません。 ループ(繰り返し) 記事があれ…

オリジナルテーマを作成

オリジナルテーマを作成する 「mytheme」フォルダーを作成する 空の「index.php」を、フォルダー内に用意する 「style.css」を、フォルダー内に用意する 「style.css」内に、以下のように記述する /* Theme Name: MY THEME Author: TRAVEL SKETCH Descriptio…

記事を投稿する

新規投稿 「投稿」→「新規追加」 テキストでは、入力するような内容になっていますが、授業ではすでに用意されているテキストファイル(XMLファイル)を読み込んで使用します。 ツール(インポート) WordPress形式を選択する 「インポート」プラグインをイ…

基本設定

サイト名を確認する 「ダッシュボード」→「設定」→「一般」 サイトの説明文を入力する 不要な記事の削除 「投稿」→「投稿一覧」→「Hello world!」 「固定ページ」→「固定ページ一覧」→「サンプルページ」 標準で用意されたカテゴリーの名前を変更する 「投稿…

WordPressの仕組みとインストール

WordPressの仕組み テキストP.20〜25 WordPressのインストール サーバーを準備する(授業ではXAMPP何にインストール) インストールに必要な情報を用意する データベース名 データベースのユーザー名 データベースのパスワード データベースのホスト名(サー…

予約システム

時間単位で予約できる予約ページを作成 プラグイン「MTS Simple Booking予約システム」をインストールする 予約システムの設定 各種設定 詳細設定をしておく 予約パラメータ カレンダーを表示する 受付を作成直後からにする 予約受付期間 当日から何ヶ月先ま…

WordPressを運用

レンタルサーバーを選ぶ 有料サーバー、無料サーバー サーバーの容量 動作保証のPHPのバージョン 使用できるデータベースの種類 所有できるデータベースの数 WordPress 日本語版の動作環境 PHP バージョン 5.2.4 以上 MySQL バージョン 5.0 以上 ロリポップ …

予約システム

時間単位で予約できる予約ページを作成 プラグイン「MTS Simple Booking予約システム」をインストールする 予約システムの設定 各種設定 詳細設定をしておく 予約パラメータ カレンダーを表示する 受付を作成直後からにする 予約受付期間 当日から何ヶ月先ま…