foundationを使ったWordPressのテーマ作成手順を一覧にしました。
テーマを作る度に、手順を記録しておこうと思うのですが、ついつい面倒で先延ばしにしてきました。
今回は、記憶にある手順はすべて書いておこうという試みです。同時に、参考にしたサイト等も整理しました。
新しいグリッドシステムである、XY Gridを使って、従来の方法を検証する必要もありましたので良い機会でした。
この記事では、以下の内容を書いています。
Foundation v6.4.2を使用して、WordPress v4.8.1のテーマを作成します。
2. テーマの作成
3. XY Gridを使ったページの編集
4. ファイルの分割、アップロード
5. ヘッダー、コンテンツ、フッターの仕上げ
6. アイキャッチの設定
長文になっていますが、ゆっくりご覧ください。
役に立ちましたら、SNSでのリアクションをぜひお願いします。
WordPressのインストール
1. WordPressをダウンロードする
2. ダウンロードしたファイルを解凍して、インストール先サーバーに転送し、インストールをする。
3. インストール後、サンプルの投稿、固定ページ、コメントを削除する。
4. 固定ページを2ページ作成する。
1) タイトル: ホーム パーマリンク: /top/
2) タイトル: 記事一覧 パーマリンク: /archive/
5. [設定]-[表示設定]-[フロントページの表示]で、[固定ページ]を選び、フロントページに[ホーム]、投稿ページに[記事一覧]を選択しておく。
テーマの作成
1. ローカルでテーマ用のフォルダを作成し、index.phpとstyle.cssを保存する。中身は空のファイルで構わない。
2. 1.で作成したフォルダを、/wp-content/themes/以下にアップロードする。
3. style.cssにテーマの情報を入力し、アップロードする。
1 2 3 4 5 6 7 8 9 10 | /* Theme Name: テーマ名 Theme URI: テーマのURI Author: 作成者 Author URI: 作成者のURI Description: テーマの説明 Version: バージョン情報 */ |
4. [ダッシュボード]-[外観]-[テーマ]で、作成したテーマを[有効化]にする。
XY Gridを使ったページの編集
1. foundationをダウンロードする。以下のサイトから「Complete」の「Download Everything」をダウンロード。
2. index.html、cssフォルダ、jsフォルダがダウンロードされる。
3. index.htmlをエディターで開き、<body>と最後から5行目の<script src="js/vendor/jquery.js"></script>の間のHTMLをすべて削除する。
4. lang属性をjaに変更する。
1 2 3 | <htmlclass="no-js"lang="ja"dir="ltr"> |
5. WordPressのテンプレートタグを入力する。
</head>の前に、<?php wp_head(); ?></body>の前に、<?php wp_footer(); ?>
6. XY Gridを使って、グリッドを作成する。
ヘッダーが2分割、コンテンツが2分割、フッターが3分割+1のグリッドです。
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <!doctypehtml> <htmlclass="no-js"lang="ja"dir="ltr"> <head> <metacharset="utf-8"> <metahttp-equiv="x-ua-compatible"content="ie=edge"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <title>FoundationforSites</title> <linkrel="stylesheet"href="css/foundation.css"> <linkrel="stylesheet"href="css/app.css"> <?phpwp_head();?> </head> <body> <divclass="grid-container"> <!--header--> <header> <divclass="grid-x grid-padding-x"> <divclass="medium-8 cell">header_left</div> <divclass="medium-4 cell">header_right</div> </div> </header> <!--/header--> <!--contents--> <divclass="contents"> <divclass="grid-x grid-padding-x"> <!--main--> <divclass="medium-8 cell"> <main>main</main> </div> <!--/main--> <!--sidebar--> <divclass="medium-4 cell"> <divclass="sidebar">sidebar</div> </div> </div> </div> <!--/sidebar--> <!--/contents--> <!--footer--> <footer> <divclass="grid-x grid-padding-x"> <divclass="medium-4 cell">footer_left</div> <divclass="medium-4 cell">footer_center</div> <divclass="medium-4 cell">footer_right</div> </div> <divclass="grid-x grid-padding-x"><code> <divclass="cell"><small>©2017</small></span></div> </div> </footer> <!--/footer--> </div><!--/.grid-container--> <!--scriptforfoundation--> <scriptsrc="js/vendor/jquery.js"></script> <scriptsrc="js/vendor/what-input.js"></script> <scriptsrc="js/vendor/foundation.js"></script> <scriptsrc="js/app.js"></script> <!--/scriptforfoundation--> <?phpwp_footer();?> </body> </html> |
作成したグリッドです。赤枠が.grid-container、青枠が.grid-xです。左右のpaddingは自動的に空きました。
smallサイズでタテに整列するレスポンシブです。
ファイルの分割
1. ファイルを分割する。
1) 先頭から、ヘッダー終了のコメントまでを切り出し、header.phpとして、テーマのフォルダ内に保存する。
2) サイドバー開始のコメントから、サイドバーの終了のコメントまでを切り出し、sidebar.phpとして、テーマのフォルダ内に保存する。
3) フッター開始のコメントから最後までを切り出し、footer.phpとして、テーマのフォルダ内に保存する。
4) 残ったindex.htmlをfront-page.phpとして、テーマのフォルダ内に保存する。
2. 分割したファイルを読み込むテンプレートタグを入力する。
front-page.phpにテンプレートタグを入力します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <?phpget_header();?> <!--contents--> <divclass="contents"> <divclass="grid-x grid-padding-x"> <!--main--> <divclass="medium-8 cell"> <main>main</main> </div> <!--/main--> <?phpget_sidebar();?> <?phpget_footer();?> |
3. ファイルをサーバーへアップロードする。
以下のファイルとフォルダを、/wp-content/themes/下のテーマ用フォルダにアップロードします。
header.phpsidebar.phpfooter.phpfront-page.php- cssフォルダ
- jsフォルダ
ファイルの仕上げ
アップロードしたファイルを仕上げていきます。
1. header.phpのcssへのパスを、/wp-content/themes/テーマ用フォルダ名/を追加して変更します。
1 2 3 4 | <linkrel="stylesheet"href="/wp-content/themes/theme_name/css/foundation.css"> <linkrel="stylesheet"href="/wp-content/themes/theme_name/css/app.css"> |
2. 同様に、footer.phpのjsへのパスを、/wp-content/themes/テーマ用フォルダ名/を追加して変更します。
1 2 3 4 5 6 | <scriptsrc="/wp-content/themes/theme_name/js/vendor/jquery.js"></script> <scriptsrc="/wp-content/themes/theme_name/js/vendor/what-input.js"></script> <scriptsrc="/wp-content/themes/theme_name/js/vendor/foundation.js"></script> <scriptsrc="/wp-content/themes/theme_name/js/app.js"></script> |
3. 変更したファイルをアップロードして、組んだグリッドが元通りに表示されていればOKです。
ヘッダーの仕上げ
1. header.phpに、description、keyword、titleを自動で生成するプログラム、およびOGP設定の別ファイルを読み込ませます。
1 2 3 4 5 6 7 8 9 10 11 | <!doctypehtml> <htmlclass="no-js"lang="ja"dir="ltr"> <head> <metacharset="utf-8"> <metahttp-equiv="x-ua-compatible"content="ie=edge"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <?phpget_template_part('head_des_key_tit');?> <?phpget_template_part('ogp');?> <linkrel="stylesheet"href="/wp-content/themes/theme_name/css/foundation.css"> |
それぞれのファイルの詳細は以下です。
head_des_key_tit.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <metaname="description"content="<?php$descrip=mb_substr(ereg_replace("(r|n|rn)","",strip_tags($post->post_content)),0,160)."..."; if(is_single()){echo$descrip;}else{bloginfo('description');} ?>"> <metaname="keywords"content="<?php$tags=get_the_tags(); if($tags){$total=count($tags);$count=1; foreach($tagsas$tag){if($total==$count){echo$tag->name;}else{echo$tag->name.', ';} $count++; } }else{echo'keywords';}?>"/> <?phpif(is_front_page()):?> <title><?phpbloginfo('name');?>|<?phpbloginfo('description');?></title> <?phpelse:?> <title><?phpwp_title('');?>|<?phpbloginfo('name');?></title> <?phpendif;?> |
wordpressで記事抜粋のdescriptionと記事タグをkeywordsに自動挿入するを参考にさせていただきました。
PHPのバージョンV.5.xで動きます。V.7.x以上をお使いの方は、$descrip = mb_substr(ereg_replace("(r|n|rn)"のereg_replaceをpreg_replaceに書き換えると動きます。
ogp.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 38 39 40 41 42 43 | <!--OGP--> <metaproperty="og:type"content="blog"> <?php if(is_single()){//単一記事ページの場合 if(have_posts()):while(have_posts()):the_post(); echo'<meta property="og:description" content="'.mb_substr(get_the_excerpt(),0,70).'">';echo"\n";//抜粋を表示 endwhile;endif; echo'<meta property="og:title" content="';the_title();echo'">';echo"\n";//単一記事タイトルを表示 echo'<meta property="og:url" content="';the_permalink();echo'">';echo"\n";//単一記事URLを表示 }else{//単一記事ページページ以外の場合（アーカイブページやホームなど） echo'<meta property="og:description" content="';bloginfo('description');echo'">';echo"\n";//「一般設定」管理画面で指定したブログの説明文を表示 echo'<meta property="og:title" content="';bloginfo('name');echo'">';echo"\n";//「一般設定」管理画面で指定したブログのタイトルを表示 echo'<meta property="og:url" content="';bloginfo('url');echo'">';echo"\n";//「一般設定」管理画面で指定したブログのURLを表示 } $str=$post->post_content; $searchPattern='/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる if (is_single()){//単一記事ページの場合 if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理 $image_id = get_post_thumbnail_id(); $image = wp_get_attachment_image_src( $image_id, 'full'); echo '<metaproperty="og:image"content="'.$image[0].'">';echo "\n"; } else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理 echo '<metaproperty="og:image"content="'.$imgurl[2].'">';echo "\n"; } else {//投稿にサムネイルも画像も無い場合の処理 $ogp_image = get_template_directory_uri().'/images/og-image.jpg'; echo '<metaproperty="og:image"content="'.$ogp_image.'">';echo "\n"; } } else {//単一記事ページページ以外の場合（アーカイブページやホームなど） if (get_header_image()){//ヘッダーイメージがある場合は、ヘッダーイメージを echo '<metaproperty="og:image"content="'.get_header_image().'">';echo "\n"; } else {//ヘッダーイメージがない場合は、テーマのスクリーンショット echo '<metaproperty="og:image"content="'.get_template_directory_uri().'/screenshot.jpg">';echo"\n"; } } ?> <metaproperty="og:site_name"content="<?phpbloginfo('name');?>"> <metaproperty="og:locale"content="ja_JP"/> <metaproperty="fb:app_id"content=""> <metaname="twitter:card"content="summary_large_image"> <metaname="twitter:site"content=""> <!--/OGP--> |
【WordPress】Facebook OGPプラグインの使用を止めて自前で設定したら意図通りの画像で正しくシェアされるようになったを参考にさせていただきました。
fb:app_id、twitter:siteが伏せてありますが、ご自身のものを入力してください。
2. ウィジェットを設定する。
ヘッダーの右側は、問い合わせ先、連絡先を入れることを想定しています。ファイルに直接書き込んでもいいのですが、汎用性を考えてウィジェットを設定します。ついでに、サイドバーのウィジェットも作ります。
functions.phpを作成します。エディターで以下を入力したら、functions.phpとして、テーマ用のフォルダに保存します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <?php if(function_exists('register_sidebar')){ register_sidebar(array( 'id'=>'header_right', 'name'=>'header_right' )); register_sidebar(array( 'id'=>'sidebar', 'name'=>'sidebar' )); } |
header.php、sidebar.phpの該当箇所にウィジェットを挿入します。
header.php
1 2 3 4 5 6 7 8 9 10 11 12 | <!--header--> <header> <divclass="grid-x grid-padding-x"> <divclass="medium-8 cell">header_left</div> <divclass="medium-4 cell"> <?phpdynamic_sidebar('header_right');?> </div> </div> </header> <!--/header--> |
sidebar.php
1 2 3 4 5 6 7 8 9 10 11 12 | <!--sidebar--> <divclass="medium-4 cell"> <divclass="sidebar"> <?phpdynamic_sidebar('sidebar');?> </div> </div> </div> </div> <!--/sidebar--> <!--/contents--> |
3. functions.php、header.php、sidebar.phpをアップロードします。
4. [ダッシュボード]-[外観]-[ウィジェット]で、ウィジェットが有効になったことを確認します。
ヘッダーとサイドバーのウィジェットが設定されました。
5. サイトのタイトルと説明を設定する
続いて左側も設定します。WordPressの設定から、タイトル、サイトの説明を表示します。タイトルにはリンクが設定されます。
1 2 3 4 5 6 7 8 | <header> <divclass="grid-x grid-padding-x"> <divclass="medium-8 cell"> <h1class="header_title"><ahref="<?phpechoesc_url(home_url('/'));?>"><?phpbloginfo('name');?></a></h1> <pclass="header_description"><?phpbloginfo('description');?></p> </div> |
6. header.phpを更新しサイトを表示して、タイトルと説明が表示されたことを確認します。
コンテンツの仕上げ
1. front-page.phpを仕上げる。
front-page.phpはトップページを表示するテンプレートです。今回は、最新の投稿を1件、表示するように設定します。
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 | <?phpget_header();?> <!--contents--> <divclass="contents"> <divclass="grid-x grid-padding-x"> <!--main--> <divclass="medium-8 cell"> <mainclass="main"> <?php$article=get_posts('posts_per_page=1');?> <?phpforeach($articleas$post):?> <?phpsetup_postdata($post);?> <h2class="main_title"><?phpthe_title();?></h2> <pclass="main_article"><?phpthe_content();?> <?phpendforeach;?> <?phpwp_reset_postdata();?> </main> </div> <!--/main--> <?phpget_sidebar();?> <?phpget_footer();?> |
2. single.phpを仕上げる。
single.phpは、個別の投稿を表示するテンプレートです。front-page.phpをコピーして作成します。
さらに、前後の投稿へ移動できるように、WordPressのテンプレートタグprevious_post_linkとnext_post_linkを使ってリンクを作成します。
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 | <?phpget_header();?> <?phpthe_post();?> <!--contents--> <divclass="contents"> <divclass="grid-x grid-padding-x"> <!--main--> <divclass="medium-8 cell"> <mainclass="main"> <h2class="main_title"><?phpthe_title();?></h2> <pclass="main_article"><?phpthe_content();?> <!--previousornextlink--> <divclass="page_link clearfix"> <spanclass="float-left"> <?phpprevious_post_link('« %link','前の記事');?> </span> <spanclass="float-right"> <?phpnext_post_link('%link »','次の記事');?> </span> </div> <!--/previousornextlink--> </main> </div> <!--/main--> <?phpget_sidebar();?> <?phpget_footer();?> |
テンプレートタグ/previous posts link
テンプレートタグ/next posts link
3. index.phpを仕上げる
index.phpで、投稿の一覧を表示します。テーマの作成で最初に作成したindex.phpを使用します。さらに、アーカイブ表示用にarchive.phpを作成します。今回は、とりあえず同じ中身で作成しておきます。
一覧ページ、アーカイブページには、ページネーションを作成します。WordPressの投稿ページネーション関数（the posts pagination）を使用します。
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 | <?phpget_header();?> <!--contents--> <divclass="contents"> <divclass="grid-x grid-padding-x"> <!--main--> <divclass="medium-8 cell"> <mainclass="main"> <?phpwhile(have_posts()):?> <?phpthe_post();?> <h2class="main_title"><ahref="<?phpthe_permalink();?>"><?phpthe_title();?></a></h2> <pclass="main_article"><?phpthe_excerpt();?> <?phpendwhile;?> <!--pagenation--> <?phpthe_posts_pagination();?> <!--/pagenation--> </main> </div> <!--/main--> <?phpget_sidebar();?> <?phpget_footer();?> |
css/style.css
1 2 3 4 5 6 7 8 9 10 11 12 | .paginationh2.screen-reader-text{ display:none; } div.nav-linksa{ display:inline-block; } div.nav-links{ margin-top:3rem; text-align:center; } |
4. front-page.php、single.php、index.php、archive.phpをアップロードします。
5. 動作を確認する。
1) WordPressをインストールしたURLにアクセス → 最新の記事が表示される
2) WordPressをインストールしたURL/archive/にアクセス → 投稿一覧が表示される
3) 投稿一覧から一つの記事をクリック → 単体の記事が表示される
フッターの仕上げ
「ページトップへ戻る」リンクを作成する。
footer.php
1 2 3 4 5 6 7 | <!--footer--> <footer> <divclass="grid-x grid-padding-x"> <spanclass="pagetop"><ahref="#">PAGETOP</a></span> <divclass="medium-4 cell">footer_left</div> |
css/style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | footerdiv.grid-x{ position:relative; } span.pagetop{ display:block; background:#00bfff; position:absolute; top:0; right:0; margin-top:-1.5rem; padding:5px; } span.pagetopa{ color:#fff; } |
アイキャッチの設定
アイキャッチ画像を使用するには、以下の2点の作業が必要です。
1. functions.phpにadd_theme_support('post-thumbnails');を追加する
2. アイキャッチを表示したい場所に、<?php the_post_thumbnail(); ?>を入力する
とりあえず、front-page.phpとsingle.phpに、<?php the_post_thumbnail(); ?>を書いておきます。
1 2 3 4 5 6 | <mainclass="main"> <?phpthe_post_thumbnail();?> <h2class="main_title"><?phpthe_title();?></h2> <pclass="main_article"><?phpthe_content();?> |
レスポンシブなグローバルナビゲーションの設定
最後に、グローバルナビゲーション、いわゆるメニューを作ります。
WordPressの機能としてメニューを作成することもできますが、今回は、foundationの機能でレスポンシブなメニューを作ります。
1. header.phpを開き、headerを閉じたあとにnavを作ります。navはheaderに含まれるだろというご指摘もあると思いますが、それでも構いません。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | </header> <!--/header--> <!--nav--> <navclass="nav"> <divclass="title-bar"data-responsive-toggle="global-menu"data-hide-for="medium"> <buttonclass="menu-icon"type="button"data-toggle></button> <divclass="title-bar-title">Menu</div> </div> <divclass="top-bar"id="global-menu"> <divclass="top-bar-left"> <ulclass="vertical medium-horizontal menu"> <li><ahref="/">ホーム</a></li> <li><ahref="/archive/">記事一覧</a></li> </ul> </div> </div> </nav> <!--/nav--> |
2. 以上でメニューが完成です。画面の幅をせばめるとメニューが変化します。色はCSSで整えてください。
と、駆け足でテーマ作成手順を見てきました。これで大枠はできていますので、中に文字を入れたり、CSSでデザインを整えたりして制作していきます。
コメント
[…] foundationを使ったWordPressのテーマ作成手順 […]