これからWordPressのテーマ制作をはじめる人のために...

99
これから WordPress テーマ 制作を はじめる人 のために Mignon Style

description

2014年10月11日に開催されたWordCamp Tokyo 2014でのセッションスライドです。

Transcript of これからWordPressのテーマ制作をはじめる人のために...

  • WordPress

    Mignon Style

  • Mignon Style

    WordPress Web

    http://mignonstyle.com/@mignon_style mignonxstyle

  • WordPressWordPress

  • WordPressChocolat https://wordpress.org/themes/chocolat

  • WordPress

    Chocolat

  • Today'sMenu

  • WordPress

    WordPress

    WordPress

    Menu 2

    Menu 1

    Menu 3

  • WordPressHTMLCSS

    HTMLCSS

  • WordPress

    Menu 1

  • 2

    HTMLCSS

    WordPress

    WordPress

    5

    3

    4

    1

  • 2

    HTMLCSS

    WordPress

    WordPress

    5

    3

    4

    1

  • HTMLCSS1

  • index.html

    content.html

    about.html

    bout

    style.css

  • 2

    HTMLCSS

    WordPress

    WordPress

    5

    3

    4

    1

  • About

    WordPress2WordPress

  • WordPress Codex http://wpdocs.sourceforge.jp/

    style.cssindex.phpsingle.phppage.php

    header.phpfooter.phpsidebar.php

    comments.phpscreenshot.pngfunctions.php

    get_header()

    get_footer()

    get_sidebar()

    comment_form()

    880px 660px

    PHP

  • page-6.php

    page.php

    index.php

    page-6.php

    page.php

    index.php

    ID6

  • WordPress Codex http://wpdocs.sourceforge.jp/

    404

    category-$slug.php

    tag-$slug.php

    author-$nicename.php index.php

    category.php

    tag.php

    author.php

    date.php

    single-post.php

    page-$id.php

    front-page.php

    category-$id.php

    tag-$id.php

    author-$id.php

    page-$slug.php

    404.php

    search.php

    archive.php

    single.php

    page.php

    home.php

  • index.phpOK

  • style.css

    OK

    style.css

    index.html

    about.html

    bout

    content.html

    index.php

  • 2

    HTMLCSS

    WordPress

    WordPress

    5

    3

    4

    1

  • index.html

    php

    3index.htmlhtmlphp

    index.phpindex.html

  • /*Theme Name: Theme URI: URIAuthor: Author URI: URIDescription: */

    style.css

    style.css

  • wp-content/themes

    WordPress

    wp-content

    themes

    mytheme

    style.css

    index.php

  • mythemescreenshot.png

    screenshot.png

    px

    px

  • 2

    HTMLCSS

    WordPress

    WordPress

    5

    3

    4

    1

  • PHP

    OK

    HTMLCSSWordPressPHP

  • true

  • WordPress

    http://mignonstyle.com/debug-mode/

    WordPress

    wp-config.php

    wp-config

    wp-config.php

    define('WP_DEBUG', false);

    define('WP_DEBUG', true);

  • WordPress

    WordPress4

  • index.php

    index.php

    |

  • index.php

    index.php

  • index.php

    index.php

  • WordPress Codex http://wpdocs.sourceforge.jp/

    URL

  • WordPress Codex http://wpdocs.sourceforge.jp/

    URL

  • index.php

    index.php

    2014/10/11

    WordCamp Tokyo 2014
  • WordPress

    1

  • Point!

    WordPress

  • 2

    HTMLCSS

    WordPress

    WordPress

    5

    3

    4

    1

  • 5

    header.php

    index.phpfooter.php

    sidebar.php

    PHP1

  • index.php

    sidebar.php

    footer.php

    header.php

  • header.php

    footer.php

    sidebar.php

  • index.php

    header.php

    sidebar.php

    footer.php

    index.php

    2

  • index.php

    header.php

    sidebar.php

    footer.php

  • index.php

    single.php

    page.php

    index.php

  • WordPress Codex http://wpdocs.sourceforge.jp/

  • WordPress

  • WordPress

    index.phpstyle.cssOK

  • WordPress

    Menu 2

  • WordPress

    WordPress.org | Themes Directory https://wordpress.org/themes/

    WordPress.org

  • WordPress

    WordPress

  • 2

    CSS

    screenshot.png

    5

    3

    4

    6

    1

  • CSS1

    /* image */.aligncenter { ... }.alignleft { ... }.alignright { ... }

    style.css

    WordPressCSS

  • /*Theme Name: Theme URI: URIAuthor: Author URI: URIDescription: Version: License: License URI: URITags: */

    style.css

  • screenshot.png2

    880px 660px

    screenshot.png

  • 3

    style.css

    index

    index.php

    comments

    comments.php

    px

    px

    screenshot.png

    comments.php

    1

  • index.php

    comments.php

  • WordPress

    2

    index.php

  • function themeslug_enqueue_styles() { wp_enqueue_style( 'themeslug-style', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_styles' );

    functions.php

    functions.php

  • Codex

  • 4

    Message

  • I18nhttp://codex.wordpress.org/I18n_for_WordPress_Developers http://wpdocs.sourceforge.jp/I18n_for_WordPress_Developers

    Message

  • http://codex.wordpress.org/Theme_Unit_Test

    51

    TestData

    https://wpcom-themes.svn.automattic.com/ demo/theme-unit-test-data.xml

  • 2

  • 6

  • http://codex.wordpress.org/Debugging_in_WordPress

    1

    WordPress

    wp-config.php

    wp-config

    wp-config.php

    define('WP_DEBUG', false);

    define('WP_DEBUG', true);

  • JavaScript IEF12

    HTMLW3C XHTML Validator http://validator.w3.org/

    CSSW3C CSS Validator http://jigsaw.w3.org/css-validator/

    2

  • Theme-Check http://wordpress.org/plugins/theme-check/

    Theme-Check3

  • Chocolat passed the tests

  • Codex

  • WordPress

  • WordPress

    Menu 3

  • WordPress

  • M a i l

  • WordPress

  • 1

    http://wordpress.org/themes/upload/

    zip8M

  • 2

  • 3

    Prefix

  • 4

    APPROVED

  • 5

    L I V E

  • !

  • Let's try!!!!

  • WordPress

    Mignon Sty le

    WordPress5Wo

    rdPress

    2014.09.08

    http://www.slideshare.net/mignonstyle/wordpress5-38514853WordPress5

  • Mignon Style@mignon_style mignonxstyle