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

授業内容

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を書かないとアイキャッチを選ぶということができません。お気をつけて！

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

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

宿題

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

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

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

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

授業内容

p35-44
Localインストールとサイトの作成

p18

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

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

• swell
• lightning
• Snow Monkey 
• Twenty Twentyシリーズ
• ワードプレステーマ　TCD
• Cocoonなどなど

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

よくブロックエディタとブロックテーマを混在してる方がいますが全く違っていてこれはテーマの話。以前からあったクラッシックテーマはPHPでガリっと作っていきます。
PHP知識が必要ですが自由度が高い。
ブロックテーマは、ビジュアルエディタで簡単にカスタマイズできる、
文字にすると説明するのが難しいですね。
ちなみに上で出てきた以下はクラッシックテーマです。

• swell
• lightning
• Snow Monkey 
• cocoon

以下はテーマによります。

• Twenty Twentyシリーズ
• ワードプレステーマ　TCD

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

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

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

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

ちなみに私は今まで[underscore]というテーマを使ってオリジナルを作ってました。SnowMonkeyやswellというテーマも使ってみたいと思いつつ、underscoreの自由度も好きなので使い分けしていけるのが私的には理想です。

p25-26

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

p31

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

p56-57

全体のサイトの確認

p64-67

プラグインがたくさんありますがまずは以下をインストールして有効化

• All-in-One WP Migration これがないと
  ローカルとリモートでのファイルのやり取りやバックアップ
• Show Current Template
  最初どのPHPに書いてるのかわからなかったのでこれを使えばバッチリ！
• WP Multibyte Patch
  日本語サイトならこちらはぜひ
  

p68-70

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

p78-94

記載通りにコピペをして進めました。