個人開発アーカイブ

（サムネイル） 今回は、Start BootStrap というhtml,cssテンプレートをダウンロードしてwordpressで管理してみましょう。 wordpressの開発には local by FlyWheel が便利です。自分のパソコンをサーバーにしてサイト開発ができます。 左下の+ボタンから Create A Siteをクリック。 サイト名、user名（メアドでok）,パスワードを入力して登録。 登録したユーザー名とパスワードでadmin（管理画面）が開けます。 これで、管理画面を作ることができました。 次にStart Bootstrapから（簡単なテンプレート）を Free Downloadします。 これで、テンプレートがダウンロードできました。 では、いよいよダウンロードしたテンプレートをWordPressで表示させてみましょう。 local by Flywheel でディレクトリを開いて /Local Sites/freelancepage(立ち上げたブログ名)/app/public/wp-content/themes/freelancepage に移動します。これを、vscodeで開きます。 ファイル改造手術 まずindex.htmlをindex.phpに改名します。これで、wordpressはindex.phpを一番最初のページだとみなします。 次に、新しくstyle.cssを作ります。そこに /* * Theme Name: Freelance Page * Author: Keitaro * Description: フリーランスのホームページです * Version: 1.0 */ と、書きます。これでWordPressは新しいテーマだと識別します。管理画面の「外観」から確認することができます。htmlが元になったオリジナルテーマです。 （ちなみに、WPでインストールしたテーマを親テーマとして、新しくカスタマイズしたテーマを作成することもできます。詳しくは子テーマについて） header.php htmlファイルでは&lt;head>&lt;/head>の中に、日本語サイトであるかや、cssファイルの参照など、使いまわしたいファイルの基本情報を書いています。これは、どのページでも共通して使う要素なので、使い回しできるようにしましょう。 新しくheader.phpをホームディレクトリに作ります。 index.phpに&lt;head>タグがあります。その、headタグを除いた中身全てをheader.phpに移します。 &lt;meta charset=&quot;utf-8&quot; /&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot; /&gt; &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt; &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt; &lt;!-- &lt;title&gt;Creative - Start Bootstrap Theme&lt;/title&gt; funcに書いてるのでいらない--&gt; &lt;!-- Favicon--&gt; &lt;link rel=&quot;icon&quot; type=&quot;image/x-icon&quot; href=&quot;assets/favicon.ico&quot; /&gt; &lt;!-- Bootstrap Icons--&gt; &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css&quot; rel=&quot;stylesheet&quot; /&gt; &lt;!-- Google fonts--&gt; &lt;link href=&quot;https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700&quot; rel=&quot;stylesheet&quot; /&gt; &lt;link href=&quot;https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt; &lt;!-- SimpleLightbox plugin CSS--&gt; &lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css&quot; rel=&quot;stylesheet&quot; /&gt; &lt;!-- Core theme CSS (includes Bootstrap)--&gt; &lt;link href=&quot;&lt;?php echo get_template_directory_uri(); ?&gt;/css/styles.css&quot; rel=&quot;stylesheet&quot; /&gt; &lt;?php wp_head(); ?&gt; ポイントは、cssファイルパスをこうすることです。 &lt;link href=&quot;&lt;?php echo get_template_directory_uri(); ?&gt;/css/styles.css&quot; rel=&quot;stylesheet&quot; /&gt; こうすれば、headにあるcssなどの情報を他のページでも使うことができますね。 そして、index.phpのheadタグの中に、以下のコードを書いてheader.phpを呼び出します。 &lt;head&gt; &lt;?php get_header(); ?&gt; &lt;/head&gt; こうすることで、header.phpに書かれてる内容を呼び出すことができます。 footer.php htmlファイルでは&lt;foot>&lt;/foot>の中にJavaScriptの情報を書きます。これも、どのページでも使い回せるようにしたいですね。なので同様にfooter.phpにまとめます。 &lt;!-- Bootstrap core JS--&gt; &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt; &lt;!-- SimpleLightbox plugin JS--&gt; &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js&quot;&gt;&lt;/script&gt; &lt;!-- Core theme JS--&gt; &lt;script src=&quot;js/scripts.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;https://cdn.startbootstrap.com/sb-forms-latest.js&quot;&gt;&lt;/script&gt; &lt;?php wp_footer(); ?&gt; そしてindex.phpの bodyタグの上にテンプレートタグを書きます。 &lt;?php get_footer(); ?&gt; &lt;/body&gt; sidebar.php (記事作成中) 他にも共通パーツを一つのファイルにしてみましょう。 ナビゲーションバー ホームページによくある 新しくincludesというファイルを作って、その中にheader.php を作ります。 &lt;!-- Navigation Barの全て--&gt; &lt;nav class=&quot;navbar navbar-expand-lg navbar-light fixed-top py-3&quot; id=&quot;mainNav&quot;&gt; &lt;div class=&quot;container px-4 px-lg-5&quot;&gt; &lt;a class=&quot;navbar-brand&quot; href=&quot;&lt;?php echo esc_url(home_url('/')); ?&gt;&quot;&gt;&lt;?php bloginfo('name'); ?&gt;&lt;/a&gt; &lt;button class=&quot;navbar-toggler navbar-toggler-right&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarResponsive&quot; aria-controls=&quot;navbarResponsive&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt; &lt;span class=&quot;navbar-toggler-icon&quot;&gt; &lt;/span&gt; &lt;/button&gt; &lt;?php $menu_name = 'global_nav'; $locations = get_nav_menu_locations(); $menu = wp_get_nav_menu_object($locations[$menu_name]); $menu_items = wp_get_nav_menu_items($menu-&gt;term_id); ?&gt; &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarResponsive&quot;&gt; &lt;ul class=&quot;navbar-nav ms-auto my-2 my-lg-0&quot;&gt; &lt;?php foreach ($menu_items as $item) : ?&gt; &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;&lt;?php echo esc_attr($item-&gt;url); ?&gt;&quot;&gt; &lt;?php echo esc_html($item-&gt;title); ?&gt; &lt;/a&gt; &lt;/li&gt; &lt;?php endforeach ?&gt; &lt;/div&gt; &lt;/div&gt; &lt;/nav&gt; index.phpでは 表示させたい箇所に &lt;?php get_template_part('includes/header'); ?&gt; と書けばokです。 company name includes/footerも共通して表示させたいからパーツ化。 index.phpの表示させたい箇所に &lt;?php get_template_part('includes/footer'); ?> &lt;!-- Footer --&gt; &lt;footer class=&quot;bg-light py-5&quot;&gt; &lt;div class=&quot;container px-4 px-lg-5&quot;&gt; &lt;div class=&quot;small text-center text-muted&quot;&gt;Copyright © 2023 - Company Name&lt;/div&gt; &lt;/div&gt; &lt;/footer&gt;

個人開発

あなたのWEBアプリにAI botをつける方法

Excelを扱うAI Agentについて調べてみた

【CSSデザイン】 selector

【WordPress制作】個別投稿パーツ

【WordPress制作】テンプレートタグを使って表示させよう

【WordPress制作】BootStrapをWordPressで立ち上げてみよう