求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

WordPress

ローカルサーバーからリモートサーバーへデプロイ

ローカルサーバーでやるべきこと テキストの内容を最後まで完成させる XAMPP(MAMP)のデータベースをエクスポート 簡易のまま書き出します(SQLファイル) MAMPの場合、すでにphpMyAdminがバージョンアップされていることが前提です レンタルサーバー用に書…

WordPress - オリジナルテーマ例

オリジナルテーマ例 更新する投稿記事とそれ以外を区別します 各テンプレートは、WordPress関数でインクルードします サーバーにアップロード後、ダッシュボードの設定と微調整をおこないます 画像投稿は、アップロード後におこないます index.php <div class="container"> <main class="main"> <article <?php post_class(); ?>> <h2></h2></article></main></div>

WordPressのテンプレートファイル化する

WordPressのテンプレートファイル化する テーマフォルダー「samplecafe」を作成 「index.php」「style.css」をテーマフォルダー内に作成 style.cssにコメントを記述 /* Theme Name: SampleCafe Description: HTMLからWordPressのThemeを作る */ 「screenshot…

WordPress化するHTMLデザインを作成

HTML+CSSでサイトのデザインを作る index.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>Home | Sample Cafe</title> <link rel="shortcut icon" href="images/favicon.ico"> <link href="http://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700" rel="stylesheet"> </link></link></meta></head></html>

テーマのファイル構成を理解する

WordPressのテーマ モジュール化された構造を持ち、テーマを切り替えることにより構造はそのままに視覚表現のみを変更できる仕組み 「wp-content/themes/」内にフォルダーを作成 今回は「NewTheme」とします ページを表示するためのテンプレートファイル i-n…

大きな画像を記事の横幅に合わせて表示 - カスタムテーマ

大きな画像を挿入する 中で挿入した画像を、「オリジナルサイズ」に置き換えてみる 《プレビュー》 記事の横幅に画像を揃えて表示する article img { border: none; max-width: 100%; height: auto; } 《プレビュー》横幅を小さく表示《プレビュー》 画像に…

記事の本文に画像を挿入する - カスタムテーマ

画像を用意する 画像は、redroof.jpg「800 × 534px」(テキストサンプル画像) 自動生成される画像の大きさを確認する ここでの大きさの変更は、アップロード済みの画像には適用されません 画像の挿入位置を指定する 記事の編集画面を開いて、記事を開きます…

WordPress - 繰り返し

繰り返し(ループ) 同じ処理や似たような処理を何度も行いたい場合 While文の書き方 while( 条件式 ){ 条件を満たす場合の動作 条件判定が最終的に偽になる変更を入れる } このコードでは、「1月2月・・・12月」と文字列を出力します。 $monthが、13にな…

WordPressテンプレートタグ

テンプレートタグとは WordPressでは、ユーザーが典型的な処理を手軽に行えるようにするため、さまざまな関数が定義されています 非常に多くの関数が存在するため、関数がいくつかのカテゴリーに分類されています なかでもテーマファイルでよく使われる関数…

wp_headerとwp_footerを追加する - カスタムテーマ

WordPressのテーマ作成では必須 と を追加する(必須) のちに、header.phpとfooter.phpを分離します </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>

トップページを表示 - カスタムテーマ

テンプレートタグの読み込み順序 「index.php」には、ダッシュボードで指定された数だけ投稿記事が表示されています その数を超えた場合に表示された表示されるのが「ページャー」です しかし、投稿記事の一覧には、「次の記事」「前の記事」という概念はあ…

前後の記事へのリンクを表示 - カスタムテーマ

前後の記事へのリンクを表示する 投稿記事のページャー(ページを移動する仕組み) $format(文字列) (オプション) リンクの文字列の書式 リンクの前後に追加する文字を設定できます 「%link」と文字列内に表記すると「$link」(次のパラメータ)に置き換…

記事の投稿日とカテゴリーを表示 - カスタムテーマ

記事の投稿日とカテゴリーを表示 日付の設定 記事の投稿日を表示する get_the_date() 「get_the_date()」は、現在の投稿(または指定された投稿)が書かれた日付を取得します the date() とは異なり、このタグは常に日付を返します 取得のみの関数のため、ec…

記事のデザインを指定する - カスタムテーマ

記事のデザインを指定する 「style.css」を編集する スタイルシートを適用する get_stylesheet_directory_uri() 現状のテーマで使われているスタイルシートの URI を返す関数です URIは、(http:// or https:// 等の完全な形の)ウェブアドレスです スタイルシ…

記事の一覧ページを作成 - カスタムテーマ

index.phpを編集する 基本構造の入力 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページタイトル</title> </head> <body> </body> </html> WordPressのテンプレートタグ 記事タイトルを表示 WordPressのif-else文 書き方としては、以下の4通りがありますが、いずれでも処理は同じになります

ローカル環境にWordPressをインストール

ローカル環境にWordPressをインストール 日本語 — WordPress ja.wordpress.org WordPressインストール手順 「XAMPP(MAMP)」内「htdocs」フォルダー内に「wordpress1207」という名前のWordPressフォルダーを配置します データベースの作成 「wordpress1207…

Google SearchConsoleで検証

All in One SEO Pack 修正 Google SearchConsoleでの結果を踏まえて All in One SEO Pack 修正 「NOINDEX」「NOFOLLOW」のチェックをすべて、外す インデックスを再リクエストします

Webサイト100選 - WordPressでサイト100選 受講生例

Webサイト100選 - WordPress 受講生例 Webサイト100選 WordPress Webサイト100選 weblesson33.wp.xdomain.jp 受講生例 Webデザインの収集-100選 好きなサイトを見てデザイン研究中。 サイト100選 white珈琲 好きなwebサイトを集めてみました。 サイト百選 ~…

Webサイト100選 - WordPressでサイト100選

Webサイト100選 - WordPressでサイト100選 過去の受講生は、hatenaとJimdo で行っていたものを、現在では WordPressで行っています ファヴィコン、タッチアイコン設定済み Full Page Screen Capture Chrome拡張機能 Webサイト100選 デザイン日和 Webサイト10…

Webサイト100選に固定ページを追加

WordPressに固定ページを作成

Favicon Rotator – ファビコンを簡単に登録

WordPress Webサイト100選 – デザイン日和 授業で紹介するWebサイトを集めてみました。 授業で全員「Webサイト100選」を作成します。 簡易インストール Webサイト100選は、簡易インストールでおこないます(WordPressの授業は、フルインストールでおこないま…