Home
スピードを求められるサイト制作の場合、WordPressとBootstrapの組み合わせが自分に合っているようです。
レスポンシブ対応でタブレットもさらっと出来るのでクライアント様にもスマホ対応だけでないって部分で喜ばれているように思います。
そこで！
WordPress独自テンプレートにBootstrap v4.5を速攻で組み込む用のソースコードを公開！
Bootstrap ver5もリリースされたので近々ver5のやーつも公開しようかいな？
header.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title> <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico"> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header> <h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1> <p id="description"><?php bloginfo('description'); ?></p> </header> <nav> <?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?> </nav> <div class="search-form"> <?php get_search_form(); ?> </div> |
footer.php
|
1 2 3 4 5 6 7 8 9 10 11 |
<footer> <p id="copyright" class="wrapper">© <?php bloginfo('name'); ?> All Rights Reserved.</p> </footer <?php wp_footer(); ?> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </body> </html> |
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<?php get_header(); ?> <main> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h2><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2> <p class="post-meta"> <span class="post-date"><?php echo get_the_date(); ?></span> <span class="category">Category - <?php the_category(', ') ?></span> <span class="comment-num"><?php comments_popup_link('Comment : 0', 'Comment : 1', 'Comments : %'); ?></span> </p> <?php the_content('続きを読む »'); ?> </div> <?php endwhile; else : ?> <div class="post"> <h2>記事はありません</h2> <p>お探しの記事は見つかりませんでした。</p> </div> <?php endif; ?> <?php if ( $wp_query -> max_num_pages > 1 ) : ?> <div class="navigation"> <div class="alignleft"><?php next_posts_link('« PREV'); ?></div> <div class="alignright"><?php previous_posts_link('NEXT »'); ?></div> </div> <?php endif; ?> </main> <?php get_sidebar(); ?> <?php get_footer(); ?> |
![WordPress […] を消す](https://kosaeru.net/wp-content/uploads/2016/02/wp-3pointleader-150x150.png)
![query postsでチェックボックスにチェックした記事を表示 [WordPress][Advanced Custom Fields]](https://kosaeru.net/wp-content/uploads/2018/11/true_or_false-150x150.jpg)