boneを試す。Step 5: Theme Basic Dataをなぞる

スポンサーリンク
この記事は約26分で読めます。

ステップ5:テーマ基本データをなぞる

style.cssファイルはテーマディレクトリにあります。

wp-content/themesフォルダ構成

wp-content/themesフォルダ
│  index.php
│  
├─theme-bones-master
│  │  .gitattributes
│  │  .gitignore
│  │  404.php
│  │  archive-custom_type.php
│  │  archive.php
│  │  CHANGELOG.md
│  │  comments.php
│  │  composer.json
│  │  favicon.ico
│  │  favicon.png
│  │  footer.php
│  │  functions.php
│  │  header.php
│  │  index.php
│  │  page-custom.php
│  │  page.php
│  │  readme.md
│  │  screenshot.png
│  │  screenshot1.png
│  │  search.php
│  │  searchform.php
│  │  sidebar.php
│  │  single-custom_type.php
│  │  single.php
│  │  style.css
│  │  taxonomy-custom_cat.php
│  │  
│  ├─library
│  │  │  admin.php
│  │  │  bones.php
│  │  │  custom-post-type.php
│  │  │  
│  │  ├─css
│  │  │      editor-style.css
│  │  │      ie.css
│  │  │      login.css
│  │  │      style.css
│  │  │      
│  │  ├─images
│  │  │      apple-touch-icon.png
│  │  │      custom-post-icon.png
│  │  │      login-logo.png
│  │  │      nothing.gif
│  │  │      nothumb.gif
│  │  │      win8-tile-icon.png
│  │  │      
│  │  ├─js
│  │  │  │  scripts.js
│  │  │  │  
│  │  │  └─libs
│  │  │          modernizr.custom.min.js
│  │  │          
│  │  ├─scss
│  │  │  │  admin.scss
│  │  │  │  config.rb
│  │  │  │  editor-style.scss
│  │  │  │  ie.scss
│  │  │  │  login.scss
│  │  │  │  style.scss
│  │  │  │  
│  │  │  ├─breakpoints
│  │  │  │      _1030up.scss
│  │  │  │      _1240up.scss
│  │  │  │      _2x.scss
│  │  │  │      _481up.scss
│  │  │  │      _768up.scss
│  │  │  │      _base.scss
│  │  │  │      
│  │  │  ├─modules
│  │  │  │      _alerts.scss
│  │  │  │      _buttons.scss
│  │  │  │      _forms.scss
│  │  │  │      
│  │  │  └─partials
│  │  │          _functions.scss
│  │  │          _grid.scss
│  │  │          _ie_grid.scss
│  │  │          _mixins.scss
│  │  │          _normalize.scss
│  │  │          _print.scss
│  │  │          _typography.scss
│  │  │          _variables.scss
│  │  │          
│  │  └─translation
│  │          da_DK.mo
│  │          da_DK.po
│  │          default.mo
│  │          default.po
│  │          de_DE.mo
│  │          de_DE.po
│  │          es_ES.mo
│  │          es_ES.po
│  │          fi_FI.mo
│  │          fi_FI.po
│  │          fr_FR.mo
│  │          fr_FR.po
│  │          he_IL.mo
│  │          he_IL.po
│  │          hr.mo
│  │          hr.po
│  │          hu_HU.mo
│  │          hu_HU.po
│  │          it_IT.mo
│  │          it_IT.po
│  │          ja.mo
│  │          ja.po
│  │          lt_LT.mo
│  │          lt_LT.po
│  │          nb_NO.mo
│  │          nb_NO.po
│  │          nl_NL.mo
│  │          nl_NL.po
│  │          pl_PL.mo
│  │          pl_PL.po
│  │          pt_PT.mo
│  │          pt_PT.po
│  │          README.md
│  │          ro_RO.mo
│  │          ro_RO.po
│  │          ru_RU.mo
│  │          ru_RU.po
│  │          sv_SE.mo
│  │          sv_SE.po
│  │          zh_CN.mo
│  │          zh_CN.po
│  │          
│  └─post-formats
│          format-aside.php
│          format-audio.php
│          format-chat.php
│          format-gallery.php
│          format-image.php
│          format-link.php
│          format-quote.php
│          format-status.php
│          format-video.php
│          format.php
│          
├─twentynineteen
│  │  404.php
│  │  archive.php
│  │  comments.php
│  │  footer.php
│  │  functions.php
│  │  header.php
│  │  image.php
│  │  index.php
│  │  package-lock.json
│  │  package.json
│  │  page.php
│  │  postcss.config.js
│  │  print.css
│  │  print.scss
│  │  readme.txt
│  │  screenshot.png
│  │  search.php
│  │  single.php
│  │  style-editor-customizer.css
│  │  style-editor-customizer.scss
│  │  style-editor.css
│  │  style-editor.scss
│  │  style-rtl.css
│  │  style.css
│  │  style.scss
│  │  
│  ├─classes
│  │      class-twentynineteen-svg-icons.php
│  │      class-twentynineteen-walker-comment.php
│  │      
│  ├─fonts
│  │      NonBreakingSpaceOverride.woff
│  │      NonBreakingSpaceOverride.woff2
│  │      
│  ├─inc
│  │      back-compat.php
│  │      color-patterns.php
│  │      customizer.php
│  │      icon-functions.php
│  │      template-functions.php
│  │      template-tags.php
│  │      
│  ├─js
│  │      customize-controls.js
│  │      customize-preview.js
│  │      priority-menu.js
│  │      skip-link-focus-fix.js
│  │      touch-keyboard-navigation.js
│  │      
│  ├─sass
│  │  │  _normalize.scss
│  │  │  
│  │  ├─blocks
│  │  │      _blocks.scss
│  │  │      
│  │  ├─elements
│  │  │      _elements.scss
│  │  │      _lists.scss
│  │  │      _tables.scss
│  │  │      
│  │  ├─forms
│  │  │      _buttons.scss
│  │  │      _fields.scss
│  │  │      _forms.scss
│  │  │      
│  │  ├─layout
│  │  │      _layout.scss
│  │  │      
│  │  ├─media
│  │  │      _captions.scss
│  │  │      _galleries.scss
│  │  │      _media.scss
│  │  │      
│  │  ├─mixins
│  │  │      _mixins-master.scss
│  │  │      _utilities.scss
│  │  │      
│  │  ├─modules
│  │  │      _accessibility.scss
│  │  │      _alignments.scss
│  │  │      _clearings.scss
│  │  │      
│  │  ├─navigation
│  │  │      _links.scss
│  │  │      _menu-footer-navigation.scss
│  │  │      _menu-main-navigation.scss
│  │  │      _menu-social-navigation.scss
│  │  │      _navigation.scss
│  │  │      _next-previous.scss
│  │  │      
│  │  ├─site
│  │  │  │  _site.scss
│  │  │  │  
│  │  │  ├─footer
│  │  │  │      _site-footer.scss
│  │  │  │      
│  │  │  ├─header
│  │  │  │      _site-featured-image.scss
│  │  │  │      _site-header.scss
│  │  │  │      
│  │  │  ├─primary
│  │  │  │      _archives.scss
│  │  │  │      _comments.scss
│  │  │  │      _posts-and-pages.scss
│  │  │  │      
│  │  │  └─secondary
│  │  │          _widgets.scss
│  │  │          
│  │  ├─typography
│  │  │      _copy.scss
│  │  │      _headings.scss
│  │  │      _typography.scss
│  │  │      
│  │  └─variables-site
│  │          _colors.scss
│  │          _columns.scss
│  │          _fonts.scss
│  │          _structure.scss
│  │          _transitions.scss
│  │          _variables-site.scss
│  │          
│  └─template-parts
│      ├─content
│      │      content-excerpt.php
│      │      content-none.php
│      │      content-page.php
│      │      content-single.php
│      │      content.php
│      │      
│      ├─footer
│      │      footer-widgets.php
│      │      
│      ├─header
│      │      entry-header.php
│      │      site-branding.php
│      │      
│      └─post
│              author-bio.php
│              discussion-meta.php
│              
├─twentyseventeen
│  │  404.php
│  │  archive.php
│  │  comments.php
│  │  footer.php
│  │  front-page.php
│  │  functions.php
│  │  header.php
│  │  index.php
│  │  page.php
│  │  README.txt
│  │  rtl.css
│  │  screenshot.png
│  │  search.php
│  │  searchform.php
│  │  sidebar.php
│  │  single.php
│  │  style.css
│  │  
│  ├─assets
│  │  ├─css
│  │  │      blocks.css
│  │  │      colors-dark.css
│  │  │      editor-blocks.css
│  │  │      editor-style.css
│  │  │      ie8.css
│  │  │      ie9.css
│  │  │      
│  │  ├─images
│  │  │      coffee.jpg
│  │  │      espresso.jpg
│  │  │      header.jpg
│  │  │      sandwich.jpg
│  │  │      svg-icons.svg
│  │  │      
│  │  └─js
│  │          customize-controls.js
│  │          customize-preview.js
│  │          global.js
│  │          html5.js
│  │          jquery.scrollTo.js
│  │          navigation.js
│  │          skip-link-focus-fix.js
│  │          
│  ├─inc
│  │      back-compat.php
│  │      color-patterns.php
│  │      custom-header.php
│  │      customizer.php
│  │      icon-functions.php
│  │      template-functions.php
│  │      template-tags.php
│  │      
│  └─template-parts
│      ├─footer
│      │      footer-widgets.php
│      │      site-info.php
│      │      
│      ├─header
│      │      header-image.php
│      │      site-branding.php
│      │      
│      ├─navigation
│      │      navigation-top.php
│      │      
│      ├─page
│      │      content-front-page-panels.php
│      │      content-front-page.php
│      │      content-page.php
│      │      
│      └─post
│              content-audio.php
│              content-excerpt.php
│              content-gallery.php
│              content-image.php
│              content-none.php
│              content-video.php
│              content.php
│              
└─twentysixteen
    │  404.php
    │  archive.php
    │  comments.php
    │  footer.php
    │  functions.php
    │  header.php
    │  image.php
    │  index.php
    │  page.php
    │  readme.txt
    │  rtl.css
    │  screenshot.png
    │  search.php
    │  searchform.php
    │  sidebar-content-bottom.php
    │  sidebar.php
    │  single.php
    │  style.css
    │  
    ├─css
    │      blocks.css
    │      editor-blocks.css
    │      editor-style.css
    │      ie.css
    │      ie7.css
    │      ie8.css
    │      
    ├─genericons
    │      COPYING.txt
    │      genericons.css
    │      Genericons.eot
    │      Genericons.svg
    │      Genericons.ttf
    │      Genericons.woff
    │      LICENSE.txt
    │      README.md
    │      
    ├─inc
    │      back-compat.php
    │      customizer.php
    │      template-tags.php
    │      
    ├─js
    │      color-scheme-control.js
    │      customize-preview.js
    │      functions.js
    │      html5.js
    │      keyboard-image-navigation.js
    │      skip-link-focus-fix.js
    │      
    └─template-parts
            biography.php
            content-none.php
            content-page.php
            content-search.php
            content-single.php
            content.php
            

基本的にBonesの基本テーマはここでは実際のスタイルを使用していません
管理者インタフェース(ダッシュボード)に情報を表示するためのデータのみを使用しています。

style.css内容

Theme Name:テーマの名前(必須)
Theme URI: テーマURL
Description:テーマの説明
Author:テーマの作者
Author URI:作者のURL
Version:テーマのバージョン
Tags:テーマのタグ

外観=>テーマ=>テーマの詳細で表示

/******************************************************************
Theme Name: Bones (Rename Me!)
Theme URI: http://www.themble.com/bones
Description: This site was built using the Bones Development Theme. For more information about Bones or to view documentation, you can visit the <a href="https://github.com/eddiemachado/bones/issues" title="Bones Issues">Bones Issues</a> page on Github. You'll want to customize this for your clients with your own information.
Author: Your Name Here
Author URI: http://www.yoururlhere.com
Version: 1.7
Tags: fluid-layout, responsive-layout, accessibility-ready, translation-ready, microformats, rtl-language-support

License: WTFPL
License URI: http://sam.zoy.org/wtfpl/
Are You Serious? Yes.


MAKE SURE TO READ BELOW BEFORE GETTING STARTED FOR THE FIRST TIME!
------------------------------------------------------------------

You may be thinking…

WHOA, WHOA, WHOA…WHAT HAPPENED HERE?

But before you freak out, let me take a few minutes to explain.

Bones now uses Sass by default. If you prefer using regular CSS,
then feel free to modify this theme how you like and keep a copy
as your own personal starting point.

DON'T DISMISS IT JUST YET THOUGH, USING Sass ISN'T AS COMPLICATED AS YOU THINK.

It does take a few minutes to wrap your head around, but it will all
be worth it. Need a quick intro? Here are a few quick reads:

Access denied
(BUY THIS)
Preprocess THIS!
A while ago I wrote a little post discussing my dive into CSS preprocessing , and, at the time, I wasn’t totally convinced that this hot newness was the be...
Sass: A Designer’s Perspective | Viget
Let me start by saying that I am not a developer. Sure, I can write some pretty solid HTML and CSS, but beyond that I defer to our great team of developers. So ...
OOCSS + Sass = The Best Way to Write CSS by Ian Storm Taylor
Sass Style Guide | CSS-Tricks
With more people than ever writing in Sass, it bears some consideration how we format it. CSS style guides are common, so perhaps we can extend those to
Developing With Sass and Chrome DevTools
In this article we'll take a look at how we can better integrate Chrome DevTools into our Sass development workflow. Tutorial Sneak Peek! Here's a peek of...
I would HIGHLY RECOMMEND, if you are going to be working with Sass, that you work locally. The browsers don't understand Sass and compiling it on the server takes a bit of a setup. That being said, here are a few MUST HAVE TOOLS for working with a pre-processor: (You really only need one of them) CodeKit: (Highly Recommended)
301 Moved Permanently
Compass App: (Windows / Mac Users)
http://compass.handlino.com/
These applications compile Sass into valid CSS. This way you can keep your production files easy to read and your CSS minified and speedy. Simply set the output to the library/css folder and you are all set. It's a thing of beauty. You can also setup auto compiling with Grunt or using Terminal on OSX. It's a bit complicated to setup so if you aren't familiar with it, just get one of the automated applications. --------------------------------------------------------------- Remember, once you download Bones it's up to you how to use it, so go nuts. Set things up and develop in a way that's easiest for you. If using Sass is still a bit confusing for you, then remove it and customize this template as you see fit. If you're a bit uneasy about using Sass or just want a familiar setup, take a few minutes and think about how much better a developer you can become by just TRYING out new technologies. It may be tough at first but it WILL make you a better developer. TRUST ME ON THIS. Give it a week, maybe two, and you will never go back. If you STILL can't get on board and want to jump ship, that's cool. Bones is not for everyone and that's ok, I mean I'm not hurt by it, whatever, I never liked you anyway. Here are some other alternatives if you're looking for a blank starter theme. I'll just be here waiting by the window, in case you ever decide to come back.
Sage | WordPress Starter Theme | Roots
WordPress starter theme with a modern front-end development workflow. Sage includes Bootstrap, Webpack as a build tool, and Browsersync for live reloading.
(way more complex but has a ton of cool features)
HTML5 Reset :: A simple set of templates for any project
A simple set of HTML5 and CSS best practices to get your HTML5 project off on the right foot.
(super clean and great markup)
Build software better, together
GitHub is where people build software. More than 50 million people use GitHub to discover, fork, and contribute to over 100 million projects.
(not sure if it's still active, but still good) That's it. It's time to jump in and get your hands dirty. Seriously, why are you still reading this? Get to work! If you have any issues or problems, you can create an issue on github or find me on Twitter: @eddiemachado (SHAMELESS PLUG!). Happy Developing! (When you're done, you may want to remove all this nonsense before passing it along to your client.) ******************************************************************/ /* WordPress Probz So Theme Check (http://wordpress.org/plugins/theme-check/) is constantly telling me that it needs these classes in the CSS even though they are in the REAL stylesheet in library/css/style.css. So we're gonna drop these here to keep it happy. Great work, Theme Check (eye roll) */ .sticky {} /* DO NOT EDIT THIS */ .gallery-caption {} /* THESE ARE USELESS */ .bypostauthor {} /* THEY ARE ONLY TO KEEP THEME CHECK HAPPY */

前へ戻る 次へ進む

error:Content is protected !!