# WordPress講義１回目 ## 環境構築 ### 1. Local公式WEBページからアプリをインストール＆起動 https://localwp.com/ ### 2. 左下のプラスボタンからサイトを追加 ``` Create a new site > Continu sitename:自由 custom php:8以上 server：Apache DB:MySQL ``` ### 3. 起動画面からトップページ、管理画面、データベースの管理画面を表示 このアプリでのプロジェクトの階層について C:\Users\user\Local Sites\サイト名\app\public この下にWordPressのプロジェクトフォルダか完成しています ## 基本操作 ### 1.管理画面を開く ### 2.記事を投稿してみる ### 3.サイトのトップで表示を確認 ### 4.テーマの変更等をしてみる ## 独自テーマを作ってみよう ### 1. Local Sites\sample\app\public\wp-content\themesの階層にmyblogという新規フォルダを作成する ### 2. myblogのフォルダの中にstyle.cssとinedx.phpを作成する ### 3. style.cssの中身を以下に編集 ``` /* Theme Name: オリジナルテーマ Version: 1.0 Author: 自分の名前 Description:このテーマは授業で制作しています */ ``` 管理画面から選択できるようになりますので有効化してみてください ### 4. index.phpに好きなHTMLを入力して確認してみる 独自テーマの最小構成はこの形になります。 ## テンプレート階層について ![](https://hackmd.io/_uploads/HkpzLQsTn.jpg) ## オリジナルテーマの開発 先ほど作った「myblog」というテーマを段階的に完成させていきます。 今回はデザインはBootStrapというCSSフレームワークを利用したものをコピペ利用します。 ここからダウンロードしてください。 https://startbootstrap.com/theme/clean-blog ### 1.ダウンロードしたテンプレートから以下のフォルダとファイルをmyblogフォルダに移動 ``` assetsフォルダ cssフォルダ jsフォルダ about.html contact.html index.html post.html ``` ### 2.index.htmlの中身をindex.phpの中にコピペして１６行目と１５１行目を以下に修正 ``` １６行目 <link href="css/styles.css" rel="stylesheet" /> ↓↓↓ <link href="<?php echo get_template_directory_uri(); ?>/css/styles.css" rel="stylesheet" /> １５１行目 <script src="js/scripts.js"></script> ↓↓↓ <script src="<?php echo get_template_directory_uri(); ?>/js/scripts.js"></script> ``` ### 3.テンプレートタグの必須項目を追加 headタグの終了タグの直前に以下を記述 ``` 省略 <!-- Core theme CSS (includes Bootstrap)--> <link href="<?php echo get_template_directory_uri(); ?>/css/styles.css" rel="stylesheet" /> <?php wp_head(); ?>　//ここを追加 </head> ``` bodyタグの終了タグの直前に以下を記述 ``` 省略 <!-- Core theme JS--> <script src="<?php echo get_template_directory_uri(); ?>/js/scripts.js"></script> <?php wp_footer(); ?>　//ここを追加 </body> </html> ``` ### 4. パーツファイルに切り分ける #### 1.header.phpファイルを作成してindex.phpのheadタグの中身をコピーして貼り付け ``` <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="description" content="" /> <meta name="author" content="" /> <title>Clean Blog - Start Bootstrap Theme</title> <link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> <!-- Font Awesome icons (free version)--> <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script> <!-- Google fonts--> <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" /> <!-- Core theme CSS (includes Bootstrap)--> <link href="<?php echo get_template_directory_uri(); ?>/css/styles.css" rel="stylesheet" /> <?php wp_head(); ?> ``` #### 2.index.phpのheadタグから呼びだす ``` <head> <?php get_header(); ?> </head> ``` #### 3.footer.phpファイルを作成してindex.phpの150~155をコピーして貼り付け ``` <!-- Bootstrap core JS--> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> <!-- Core theme JS--> <script src="<?php echo get_template_directory_uri(); ?>/js/scripts.js"></script> <?php wp_footer(); ?> ``` #### 2.index.phpのbody終了タグ直前から呼びだす ``` 省略 </div> </footer> <?php get_footer(); ?> </body> </html> ``` ### 投稿記事をループで表示してみる ``` <div class="col-md-10 col-lg-8 col-xl-7"> <?php if( have_posts()):?> <?php while( have_posts() ): the_post()?> <!-- Post preview--> <div class="post-preview"> <a href="post.html"> <h2 class="post-title"><?php the_title(); ?></h2> <h3 class="post-subtitle"><?php the_excerpt();?></h3> </a> <p class="post-meta"> Posted by <a href="#!">Start Bootstrap</a> on September 24, 2023 </p> </div> <!-- Divider--> <hr class="my-4" /> <?php endwhile; ?> <?php else:?> 投稿がみつかりませんでした。 <?php endif;?> </div> ```