勉強会授業後の確認資料です。

授業内容

今日はやり切るぞ！と思ったが、、終わらずあと１回

今日で終わらすはずがACFの説明に時間がかかったこともあり終わらずです

1.書き換えたところを実際に見てもらった方が良いので以下確認してください。

front-page.php

https://cogumo.sakura.ne.jp/wordpress3/ex1

parts-companyinfo.php

https://cogumo.sakura.ne.jp/wordpress3/ex2

パスワードはslackに書きますね。

２.トップページ用のcssを読み込む~

p216~ここはテキスト通りトップページのcssを埋め込んでください。
p218のトップページだけサイト名をh1にする設定もしてください。

3.トップページ用のjsを読み込む

p219 ここのjsを読んで初めて画像が表示されます。

次回の内容は

お疲れ様でした。

勉強会授業後の確認資料です。

授業内容

今日は「Advanced Custom Fields（ACF）」がメインかな

うわ！もう５回目・・予定よりちょい時間がかかっておりますがドンマイ！
本日の内容もテキストと違うので、、復習しないとですね

1.会社概要ページの作成

p185からスタート

company.htmlをコピーして「page-company.php」に変更
いつもの
<?php get_header(); ?>と<?php get_footer(); ?>をします！

固定ページを作成。スラッグを必ず「company」にすること。ここは結びついている

２.カスタムフィールドの設定

テキストでは「Smart Custom Fields（SCF）」というプラグインを入れてますが現在Smart Custom Fieldsは開発終了になっているので
「Advanced Custom Fields（ACF）」を入れます。

今回のテキストの流れで言うとSC FとACFの一番の違いは繰り返しができないと言うこと。ACFも有料にすれば繰り返せます。

左側のメニューのACFのところでフィールドグループを追加
グループ名「company_group」

まずは画像！以下のように設定

次にテキストブロックとなる会社設立年のところ

地図のところがリッチエディターと言うのなので上記のと違います。以下のように

そして一番下の設定を

会社概要ページには入力されるところが出るようにします。

3.固定ページ（会社概要）に掲載内容を入力する（p191〜）

基本的に191〜195までは一緒

4.ACFを表示させる！

 <dt>社名</dt>
 <dd><?php the_field('company_name'); ?></dd>

と言うように
<?php the_field(‘フィールド名’); ?>で表示されます。

ただmapのみ

<div class="map">
<?php  echo get_field('company_map'); ?>
</div>

上記のように

<?php echo get_field(‘フィールド名’); ?>と書いてくださいね

テキストのSCF::~~というのは今回は書くことはないです。

5.トップページ

前回front-page.phpについてお話がてら作ってみましたので既に存在していますが、
P207ページから作業します。上書きしました

いつもの
<?php get_header(); ?>と<?php get_footer(); ?>をします！

というわけでここまででした。

ここまでできたらこんな感じ（画像とか見えてないよ）
https://cogumo.sakura.ne.jp/wordpress3/
参加された方にパスワードは送ります。

宿題

1.front-page.phpの画像のパスをphpに対応したものにしてくること
例えば
./img/top-about-img1-sp.jpgを

<?php echo get_stylesheet_directory_uri(); ?>/img/top-about-img1-sp.jpg

というようにしてください。

2.front-pageに設置したACFの中身を入れてきてください。（画像とタイトルとテキスト）
頑張れたらフッターのACFを作ってくる。（できるかな〜できたらで）ここまでのデータも持っていきます。

次回の内容は

次回で一旦テキストは終わるかなと思っている。

でも本当はカスタムポストタイプをやりたいのでそこはまた相談です

お疲れ様でした。

勉強会授業後の確認資料です。

授業内容

WordPressを初めてサーバーにアップ。

前回までlocalで作っていたサイトをサーバーにアップするという作業をしました。
Local(https://localwp.com/）ではWordPressのサイトからダウンロードしたりデータベースと連結したりせず簡単に構築できるので実際のサーバーへのアップはなかなか難しかったですね。

今日必要なこと

・使用しているサーバー管理パネルのログイン情報（本日はさくらサーバーとxserverの方がいました）

・FTPソフト（授業ではFileZilla)でサーバーと繋がる状態

・前回まで作業していたWordPressのエクスポートファイル

・WordPressのデータ（https://wordpress.org/download/）

1.自分のサーバーにWordPressのファイル一式をアップする

FTPソフト（FileZila）で自分のサーバーと接続後、それぞれのサーバーに合わせて以下にWordPressのデータ（https://wordpress.org/download/）ダウンロードして解凍したものをアップロード

さくらサーバー→「www」フォルダの下

xserver→アップしたいドメインフォルダの「public_html」の中
特にドメインがない場合はデフォルトのドメイン（例）xs●●●●.xsrv.jpのような初期値フォルダ

かなりな量のファイルをアップするから最初はびっくりしちゃうと思いますが待ちましょう！

2.データベースの設定

サーバーのコントロールパネル（さくらサーバーの場合）

新規追加をクリック

データベース名
パスワードを入れる。
ここは新たに自分で考えたもの。

３.ドメイン/SSLのところの「初期」というところのドメインの後ろに作ったディレクトリ名[test]にアクセスする。

さくらサーバーでwwwフォルダの下に「test」ディレクトリを作ってそこにWordPressを入れた場合

するとこんな画面に→日本語を選ぶ→次の画面で「さあ、始めましょう！」をクリック

４今回一番、みんなが大変だったこちら！！

上記が問題なく入っていたら「インストール実行」の画面になります。

その後ようこそ画面が出てきます。ここはすぐに「all in one migration」でエクスポートしたものを入れるので適当でOK

インストールの実行

「all in one migration」をプラグインで入れてLocalで作っていたものをインポートする。

アップの終了！！

この日はまたまたさらに色々あって
WordPressのパスワードを忘れたらどうするか・・
phpMyAdminにログインしてパスワードを変更するなどやりましたが今回はここまでにします。

次回の内容は

宿題

P152,P170ナビゲーションの現在地表示設定

勉強会授業後の確認資料です。

授業内容

1.archive.phpを完成させる

前回までにheader,footer,sidebarは読み込み済み

p155テキストではpart-archivepost.phpにまとめて別のページでも使いまわせるようにするということからでしたが、今回の授業では使い回しにする前にarchive.phpに全部書いてみることにしました。

テキスト通りの「part-archivepost.php」を作るコードだとエラーが出てしまいます。
〜〜〜?>閉じる！！！
<?php~~~~から始まる！！という当たり前のようですが最初は分かりづらいところをしっかり覚えておいてくださいね。

・WP-PageNaviのブラグインを入れる。P161
・１ページに幾つの記事を掲載するかは「設定」→「表示設定」で変更できました。P162

2.お知らせのトップページ制作

今日はP150~P182とすごく少なかったのですがとってもハードでした。。

次回の内容は

宿題

p140 にあるサムネイルのサイズの考え方を調べてみてください。いろんな考えがあると思うので次回の授業でみんなで共有できたらと思います。

P152,P170ナビゲーションの現在地表示設定

勉強会授業後の確認資料です。

授業内容

1.プラグインを入れる。

2.All-in-One WP Migrationで前回までのエクスポート

ここからテキストスタート

p123のファイルをコピー

p125　<?php if(is_single()) echo ‘ class=”current”‘; ?>　初めてのif文
single.php（今回の場合ニュースそれぞれの記事ページ）だったら”current”というクラスをつけてね！（上手く行ったらnavのお知らせが青い色に！）

投稿にある記事を見るも、全然レイアウトもできてないし当たり前だけどsingle.htmlの中身です！

single.phpにヘッダーとフッターを読み込み！get !!!

p128-131
sidebar.phpを作ってテキスト通りコピペ

p135 functions.phpを作ってアイキャッチが選択できるよに設定する

<?php 
function theme_setup(){
  add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'theme_setup');

3.ファイル名って大事よ話

function.phpじゃダメで絶対functions.phpこのSが大事なのです。
header.phpやfooter.php、single.phpなどもWordPressでは名前に決まりがあるので色々あるので気をつけましょうね！

ちょっと戻って改めて
　p132-134
先にheaderやfooterはgetしているのでやってないところを！
・パンくずりすとはまだやらない
ここで初のforeach文！！ループ関連はまたまとめてきちんと説明します。

まだ記事が１つしかないので前後の記事というのは現れなくなります。

3.記事を作る

duplicate postで複製します。その時にp138のカテゴリの設定もしましょうね。

4.アーカイブページ

p150-151 ファイルをコピー、ナビゲーションの条件に追加（縦棒２本でorという意味）

p159のサイドバーのところとheader、footer

次回の内容は

宿題

p140 にあるサムネイルのサイズの考え方を調べてみてください。いろんな考えがあると思うので次回の授業でみんなで共有できたらと思います。

できる方はここまでをもう一度やってみる。（新しくサイトを作って）

投稿を今日は複製で５個くらい作りましたが１０以上欲しいので複製で良いので作ってきてください。アイキャッチは何か指定してきてくださいね。

勉強会授業後の確認資料です。

宿題

localをインストールしてくること
https://localwp.com/

・localのダウンロード
https://localwp.com

・「HTMLサイトをWordPressにする」本のデータをダウンロード

・Visual Studio Code　ダウンロード使えるように
https://code.visualstudio.com/download

授業内容

CMSの種類から始まり、よく使われいてるCMSとして
WordPress 、WIX、STUDIO、shopifyの説明をしました。

既存テーマとオリジナルテーマ

今回はオリジナルテーマを作ります。
既存のテーマで有名なものなど説明

ブロックテーマとクラッシックテーマ

クラッシックテーマ

よくブロックエディタとブロックテーマを混在してる方がいますが全く違っていてこれはテーマの話。以前からあったクラッシックテーマはPHPでガリっと作っていきます。
PHP知識が必要ですが自由度が高い。

• swell
• lightning
• Snow Monkey 
• cocoon

ブロックテーマ

ブロックテーマは、ビジュアルエディタで簡単にカスタマイズできる、
文字にすると説明するのが難しいですね。

• unitone
• Twenty Twenty-Five

それにしてもTCDは人気ですね。

ブロックエディタとクラッシックエディタ

ここがわかりづらい、、またブロック？クラッシック？？なんでおんなじような名前にしちゃうかな〜

ここは実際に記事やページを書くときの作りかな。私は長年クラッシックエディタを使っていたから最初はブロックエディタが本当に使いづらくてプラグインでClassic Editorというプラグインを使っていましたが、慣れるとなんて便利なんでしょう〜〜〜
選べば素敵なギャラリーやタイトルとテキストなんかが作れてしまいます。
でもこれから皆さんがいろんなサイトに関わっていくにあたりクラッシックエディタのところもまだまだあるので知っておいた方良いと思います。

ここでは実際のサイトの管理画面を見てもらいました。

p25-26

今回作成するサイトの構成説明。

p31

WordPressってファイル名がかなり大事！
なんとなくつけてしまったファイル名が予約語だと後からめんどいです。
31に掲載されているのは使わないでね。

p56-57

全体のサイトの確認

p68-70

管理画面の設定をしていきます。
テキストの流れで問題ないのですが１点。
WordPress初期設定の「?p=123」よりも「setup-permalink」のような意味のある単語を使ったURLが良い！
Googleはハイフンを推奨し、アンダースコアを非推奨　google推奨だと以下になります。
/%category%/%postname%/
今回はテキスト通りで/%post_id%/でいきましょう。
/%category%/%postname%/にするデメリットはクライアントさんが更新する場合タイトル名に日本語入れてそのままにするとURLが変な文字の入ったものになります。

p78-85

データをコピペしてheader.phpを整えてindex.phpに読み込む作業まで！

宿題はP88まで。footer.phpを作ってindex.phpに読み込んでくること！

今日の勉強会ではWordPressの概要と設計の大切さ、静的サイトとの違いなど話すことが多かったのですが次回はもっと手を動かしていきます！

最初で大変だったと思います！頭から湯気出ちゃうよね。

次回の内容は

勉強会授業後の確認資料です。

授業内容

p89-90

固定ページの中身を書き換える

index.phpの中身（元々はprivacy-policyのhtmlファイル）を実際のprivacy-policyページにコピペ。
ここではコードエディタとビジュアルエディタという切り替えがあることを知っておいてほしい。
もう一つはリンクを「privacy」に変更しています。こちらは後々説明ありますが「content: attr(data-title);」のcssで表示させるときに関係していきます。

p91

初めての条件分岐を書いてみる！

<?php if(have_posts()): ?>
    <?php while(have_posts()): the_post(); ?>
        この中の処理

     <?php endwhile; ?>
 <?php endif; ?>

もし投稿があったら、投稿が無くなるまで
「この中の処理」を
してください。
以上！という意味です。
これからどんどん出てきます。

p92

パンくずを設定していく。

今回は「Breadcrumb NavXT」というプラグインで今回は設定していきます。

作業する度に画面を確認をしてくださいね！

p104-105

index.phpを分岐コードに切り替える

<?php if(is_page('privacy')): ?>
    <h1 data-title="Privacy Policy" class="page-title"><?php the_title(); ?></h1>
<?php else: ?>
    <h1 data-title="<?php echo ucwords($post->post_name); ?>" class="page-title"><?php the_title(); ?></h1>
<?php endif; ?>

<?php if(is_page(‘privacy’)): ?>もし’privacy’ページだったら

<?php else: ?>そうじゃなかったら

<?php endif; ?>if文終了！！

p106-p120は一旦飛ばしました。

p123

single.phpを作成（single.phpは各記事の時（個別ページ）に使用されるphpファイルです）

Show Current Template – WordPress プラグイン
こちらを入れているので投稿ページを見てどのファイルを使用しているかも確認しましょう！

p124　またまた分岐！

画像をクリックしたら拡大して出るlight boxをシングルページの場合読み込ませたいので

<?php if(is_single()): ?>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css">
<?php endif; ?>

p128 sideber.phpの設定
asideの中身をsideber.phpにコピペして尚且つ
投稿年

<ul class="sidebar-list">
  <?php wp_get_archives('type=yearly'); ?>
</ul>

カテゴリー

 <ul class="sidebar-list">
 <?php wp_list_categories('title_li='); ?>
</ul>

上記のコードに書き換える。p130-131を参考に読む

p132-133

これから何度も出てくるヘッダー、フッター、サイドバーを読み込む
これは覚えましょ！！！

ヘッダーを読み込む！

<?php get_header(); ?>

<main>タグのの中にメインループを書きます〜
この間をぐるぐるwhile文のなかで繰り返します。

/*メインループを開始するコード*/
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
ループの中身をここに書きます！！
<?php endwhile; ?>
<?php endif; ?>

p133の17行目から〜カテゴリーを表示するための foreach文！！
カテゴリーが存在する間カテゴリーを表示します！

/*カテゴリーリスト*/   
<?php 
$cats = get_the_category();
if($cats):
?>
    <ul class="cat-list">
    <?php foreach($cats as $cat): ?>
        <li><?php echo $cat->name; ?></li>
    <?php endforeach; ?>
    </ul>
<?php endif; ?>     

タイトルの表示!これも本当によくでます！

<?php the_title(); ?>

アイキャッチを表示するコード

<?php if(has_post_thumbnail()): ?>
<figure class="eyecatch">
    <?php the_post_thumbnail('full'); ?>
</figure>
<?php endif; ?>

フッターを表示するコード

<?php get_footer(); ?>

WordPressではファイル名のスペルを間違えるとNGなものが多いです。
もう決まっているファイル名！
header.phpとかfooter.phpとか
この辺りは絶対このままで！

p136-137　functions.phpを作成します！

デフォルトのテンプレートなどは選んだ時からアイキャッチを入れることができるのですが今回はこちらのfunctions.phpを書かないとアイキャッチを選ぶということができません。お気をつけて！

ここまでやったらエクスポートして提出でした。