“Ability proceeds from a fusion of skills, knowledge, understanding and imagination, consolidated by experience.”

MICHAEL KLARKE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare porttitor ipsum a mollis. Pellentesque sagittis enim ac libero luctus, at vulputate ante lobortis. Praesent lacinia, leo sit amet congue malesuada.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor ins.

【超入門】最小構成のWordpressテーマを作る

Wordpress,超入門
2018年8月20日

のすけです。前回はWordpressテーマの構成について触れました。 hollywis.hatenablog.com 今回はWordpressテーマを作っていきたいと思います。それも最小の。レイアウトを決めるまず実現したいレイアウトを決めます。今回は最小構成ということでHTMLはこんな感じにします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サイトのタイトル</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0 "> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> </head> <body> <header class="site-header"> ヘッダーをここに記述 </header> <div class="container"> <div class="wrap">  <div id="primary" class="main"> メイン部分 <article class="entry"> <h2 class="entry-head">タイトル</h2> <div class="entry-body"> <p>本文</p> </div> </article> <article class="entry"> <h2 class="entry-head">タイトル</h2> <div class="entry-body"> <p>本文</p> </div> </article> 〜 </div> <aside id="scecondary" class="site-side"> サイドバーをここに記述  </aside> </div> </div>  <footer class="site-footer"> フッターをここに記述 </footer> </body> </html> これをphp化していきます。最小のテーマ構成ファイル準備必要なのはこの２つです。 index.php style.css そして、一応テーマのサムネイル画像も用意しましょう screenshot.png HTMLでは、header.phpやfooter.phpにも触れていますが今回は、最小テンプレートということで、全部index.phpに入れてしまいます。分割は、必要なタイミングで順次やっていくほうが構成を覚えられて良いと思います。既存のテーマを見て分かるかと思いますが、ファイルが多すぎて何が何やら把握するのが難しいです。一度テーマを作ったことのある人なら問題ないのでしょうが、初心者には厳しいかと思います。そこで、最小のテンプレートを作っていき、これをどんどん肉付けしていくことで構造を把握する形を取ります。それでは作成していきましょう。まず、ディレクトリを作成して、３つのファイルを配置していきます。テーマ名は「index.php」と「style.csss」は最初は空で大丈夫です。「screenshot.png」は「横880px・縦660px」の適当な画像を用意しましょう。 index.phpにHTMLを記述する上記HTMLをindex.phpとして保存して配置します。 style.cssを記述する次のように記載していきます。cssの記載はざっくりレイアウトのみ記載しました。 /* Theme Name: AnotherSky Theme URI: http://hollywis.hatenablog.com/ Author: hollywis Author...

RECENT ARTCLES

lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ets unsers.

旅の発見をシェアしてみる

nosuke2014-06-01T12:22:51+09:006月 1st, 2014|未分類|

最近かなり暑くなってきましたね。梅雨前のつかの間の気候の良い時期なので、お出かけする方も多いのではないでしょうか。私も先日関西に行く用事があり、そこで泊まったホテルが思いのほか良かったので、ホックーの記事にしてみました。関西に泊まるなら... 宝塚のお得な老舗ホテルを試してみませんか？旅に出ると普段と環境が違うので、いろいろな面白い発見をする事が多いと思います。そんなときは、気軽にホックーに投稿してみてください！ [さいぞう]

記事詳細画面リニューアル！

nosuke2014-05-26T16:27:55+09:005月 26th, 2014|未分類|

初期リリースから、いきなりインフルエンザなどの障害もあり前途多難なスタートを切ったホックー！ですが、このたび記事詳細画面がリニューアルされました。以前までは無味無臭な感じのシンプルなデザインでしたが、実際にいろいろな方からご意見を頂きまして、よりポップなデザインへと変更しました。本サービスでは、その場所の「楽しみ方」をシェアするというコンセプトがありまして、それをわかりやすくするため記事冒頭に「楽しみポイント」を提示するよう変更しました。こちら！まだまだ、これからですが使っていただける方のご意見を大切にこれからもよりよいサービスを作っていきます。よろしくお願いします！「のすけ」

はりうすでインフルエンザ大流行

nosuke2014-05-22T11:04:04+09:005月 22nd, 2014|未分類|

世の中では大流行中ということはないと思いますが、まだ流行シーズン中のようです。はりうす開発チームでは、2名しかいないスタッフが順番にやられて寝込んでしまいました。うう... 開発スケジュールが.. みなさんもお気をつけて... [さいぞう]

Our Work

dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Our Work

1975

本日、スタートアップ「はりうす」第二弾サービス　「ホックー！α(アルファ)」をリリースしました！

nosuke2014-05-14T16:31:53+09:005月 14th, 2014|0 Comments

いろいろな場所を紹介するサービス「ホックー！」をアルファリリースしました！ https://hotcool.hollywis.com/ その場所についての超ホットなスポット、超クールなスポットを共有するサイトです。何とかαリリースまでできました！これから順次機能追加を予定していますので、よろしくお願いします。

Ready to Talk?

do you have a big idea we can help with?

RECENT ARTCLES

旅の発見をシェアしてみる

記事詳細画面リニューアル！

はりうすでインフルエンザ大流行

Our Work

本日、スタートアップ「はりうす」第二弾サービス 「ホックー！α(アルファ)」をリリースしました！

Ready to Talk?

本日、スタートアップ「はりうす」第二弾サービス　「ホックー！α(アルファ)」をリリースしました！