前回、WordPressを理解すべく、自作したのですが（WordPress 自作のまとめ）その時作ったのがポートフォリオサイトです。それはRitsuko Profileです。
今回はまた違うデザインで作ろうと思い、最初は自作をしてたのですが、思うようにいかなかったので、結局、Twenty Seventeenを使うことにしました。このブログもそうなのですが、結構好きなテーマです。
１．固定ページの設定。
２．Sectionを使ってすべて1ページに表示する。
３．ページ編集のところへ行ってそれぞれ編集します。
４．BootStrapを使ってSkillsを表示する。
５．セクションとセクションの間にFeatured Imageを入れてみた。
１．固定ページの設定
Customize –> homepage Settingsで
まずAbout Meを固定のホームページに設定します。
Job historyは記事という形にしたので、Post pageをJob History のページに設定。
２．Sectionを使ってすべて1ページに表示する。
Customize –> Theme optionに行き各セクションを設定します。
フロントページにセクションは４つまで設定できるようです。
Section 1-4にそれぞれあれば既存のページを割り当てて、なければページ新しく追加しながら割り当てます。
３．ページ編集のところへ行ってそれぞれ編集します。
元となるイメージはHtmlで作ってあるのでそのままコピペするだけです。CSSはAdditional CSSに追加してきます。
一番苦労したのは自分のスキルを四角のコマの数で表示するのになぜかBootStrapがうまく動いてくれなかったことでした。
横に表示させたいのになぜか縦のまま。Spanを縦に並べていたのを横に並び替えて、PaddingとMarginを追加したらなんとか解決しました。
普通にHtmlで表示するとうまくいくのにWordPressではなぜかうまくいかないという良くわからないままとりあえずの妥協策です。リスポンシブになっているので他の機能は動いています。
↓が追加のCSSです（Customize–>Additional CSS)。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#skills .skill_section .skill_item span.fill { background-color: #007bff; } #skills .skill_section .skill_item span { display: inline-flex; background-color: #f2e0e0; height: 10px; width: 10px; padding:2px; margin:2px; } .value { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; } .site-info{display: none;} |
４．BootStrapを使ってSkillsを表示する。
BootStrapをまず使うためにスタイルシートのリンクを貼らないといけないので、
Theme editor –> Functions.phpにいって以下のように追加しました。
Fontawesomeも使用するので一緒に追加です。
twentyseventeen_scriptsというFunctionの中に、wp_enqueue_style(‘bootstrap’)とwp_enqueue_style(‘fontawesome’)を追加しました。
|
1 2 3 4 5 6 7 8 9 10 |
function twentyseventeen_scripts() { //add bootstrap wp_enqueue_style('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'); //add fontawesome wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.0.13/css/all.css'); } add_action( 'wp_enqueue_scripts', 'twentyseventeen_scripts' ); |
以下のコードも入れようとしたのですが、エラーがでて更新できませんでした。でもBootStrapは上のコードだけで動いているようです。
|
1 2 3 4 |
function themebs_enqueue_scripts() { wp_enqueue_script( 'bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'themebs_enqueue_scripts'); |
５．セクションとセクションの間にFeatured Imageを入れてみた。
これは簡単です。各ページ、私はContactとJob historyに入れたかったのでそのページにいき、Featured Imageを設定するだけでした。↓はContactのFeatured Imageです。
まとめると、
BootStrapでちょっと苦労したものの、既存のテーマを使う方が一から作るよりやっぱり楽ということが分かりました。今回作ったのはまだローカルにしかないので、いずれサーバにアップする予定です。
Functions.phpを触ったりするのでやはりローカルで試してからサーバへアップするというは安全かなと思います。