WordPress と WooCommerece による ECサイト構築セミナー

2018年2月23日開催時資料

Transcript

1. WordPress ͱ WooCommerece ʹΑΔ ECαΠτߏஙηϛφʔ 2018೥2݄23೔
2. ߨࢣ঺հ ాதɹণฏ WooCommerceͷίΞίϯτϦϏϡʔλʔ
 WooCommerceͷ೔ຊޠฤूऀ
 WooCommerce for Japanͷ։ൃऀ
 WordPressٴͼWooCommerceͷϓϥάΠϯ։ൃऀ
 ECαΠτܦӦܦݧऀʢ࠷େ݄࣌঎2ԯ5ઍສʣ
 EC cube, CS-cart, Magento ։ൃܦݧ͋Γ
3. ୈҰ෦
   ໨࣍ 1. ECͷجຊ
 ෺ཧతͳ෺ͱσδλϧσʔλͱαʔϏεΛചΔ
 ෺ྲྀ͸࠷ॳʹߟ͑Δඞཁ͕͋Δ
 EC͸ηΩϡϦςΟʔͱදࣔ଎౓໋͕ 2.WooCommerceͷجຊ
 WordPress͕ແ͍ͱಈ͔ͳ͍جຊͷʮΩʯ
 WordPressͷϓϥάΠϯͳͷͰɺ৭Μͳࣄ͕࣮૷Մೳ
 ੈքͰҰ൪࢖ΘΕ͍ͯΔ͚Ͳɺ೔ຊͰ͸ʁ 3.WooCommerceͷجຊૢ࡞
 Πϯετʔϧ͔Βجຊઃఆʢૹྉઃఆʣ
 ঎඼ొ࿥
 ஫จ؅ཧ
4. 1. ECͷجຊ
 ෺ཧతͳ෺とσδλϧσʔλとαʔϏεΛചΔ • ෺ཧతͳ঎඼ͷൢചʢҰൠతͳECʣ • σδλϧσʔλͷൢചʢԻָϑΝΠϧɺը૾ϑΝΠϧɺ ϓϩάϥϜͳͲʣ • αϩϯ΍॓ധͷ༧໿͔Βίϯςϯπൢച
5. 1. ECͷجຊ
 ෺ྲྀ͸࠷ॳʹߟ͑Δඞཁ͕͋Δ • ഑ૹۀऀͷબผ • ࡏݿ͸Ͳ͜Ͱ؅ཧΛ͢Δͷ͔ɻग़ՙۀ຿͸୭͕͢Δͷ͔ɻ • ೖՙ͔Βग़ՙ·ͰͷϦʔυλΠϜ͸Ͳͷ͘Β͍͔ɻ
6. 1. ECͷجຊ
 &$͸ηΩϡϦςΟʔͱදࣔ଎౓໋͕ • ݸਓ৘ใ͕͋Δ͔ΒɺαΠτͷ৐ͬऔΓ͸ݸਓ৘ใͷྲྀ ग़ͱಉ͡ɻ • Ξοϓσʔτ͸ඞͣग़དྷΔମ੍ٴͼ։ൃΛߦ͏ɻ • දࣔ଎౓͸ৗʹҙࣝ͢ΔɻҰൠతʹ͸2ඵҎԼɻ
7. 2. WooCommerceͷجຊ
 WordPress が無いと動かない基本の「キ」 • WooCommerce ͸ͨͩͷ WordPress ͷϓϥάΠϯ • WordPress ͷηΩϡϦςΟʔରࡦ͕ͦͷ··WooCommerce ͷηΩϡϦςΟʔରࡦ • WooCommerce ͷ֦ுػೳ΋WordPressͷϓϥάΠϯ • αΠτͷσβΠϯ͸ςʔϚΛར༻WordPress͕ແ͍ͱಈ͔ͳ ͍
8. 2. WooCommerceͷجຊ
 WordPress のプラグインなので、৭Μͳࣄ͕࣮૷Մೳ • WordPress ͷϓϥάΠϯͰग़དྷΔ͜ͱ͸ͳΜͰ΋ग़དྷΔ • action hook ΍ filter hook ͷར༻͕Մೳ • طଘͷϓϥάΠϯ΋ซ༻͢Δ͜ͱ΋Մೳ • ͢ͰʹੈքͰ͸਺ඦͷWooCommerceͷػೳ֦ுϓϥάΠ ϯ͕͋Δ
9. 2. WooCommerceͷجຊ
 世界で一番使われているけど、日本では？ • ੈքͷ40%Ҏ্ͷΦϯϥΠϯγϣοϓͰ࢖ΘΕ͍ͯΔɻ
 (stats from Builtwith) • ೔ຊͰ͸ 3,000 αΠτҎ্͕࣮Քಇத • 3೥લ͔Βຖ೥ഒʹͳ͍ͬͯΔ • 2೥ޙʹ͸10,000αΠτ͕Քಇ͍ͯ͠Δʢ͔΋ʁʣ
10. 3. WooCommerceͷجຊૢ࡞ • Πϯετʔϧ͔Βجຊઃఆʢૹྉઃఆʣ • ରԠςʔϚ Storefront ͷઃఆ • ঎඼ొ࿥ • ஫จ؅ཧ • WooCommerce for Japan ͷΠϯετʔϧ
11. ࢀߟ URL • WooCommerce For Japan • ೔ຊ޲͚঎඼μϛʔσʔλ • WooCommerceެࣜ༗ྉػೳ֦ுϓϥάΠϯ • ৬ਓ޻๪ͷαΠτ
12. ୈೋ෦
    ໨࣍ 4. ςʔϚ࡞੒ͷجຊ
 WordPressͷςʔϚ࡞੒ͱجຊ͸Ұॹ
 WooCommerceಠࣗͷσβΠϯΛςʔϚ಺Ͱௐ੔͢Δ
 ςϯϓϨʔτϑΝΠϧΛৗʹ࠷৽ঢ়ଶ΁ 5.WooCommerce ͷ filter hook ٴͼ action hook
 ௥Ճػೳ͸֦ுػೳϓϥάΠϯΛར༻
 ػೳతͳ෺͸ग़དྷΔ͚ͩ functions.php ʹͯ filter hook ͔ action hook Λ࢖͏

13. 4. ςʔϚ࡞੒ͷجຊ
 8PSE1SFTT
    ͷςʔϚ࡞੒ͱجຊ͸Ұॹ • style.css ͳͲ͔Βɺheader.phpͳͲجຊߏ੒͸Ұॹ • ςʔϚ಺ͰWooCommerceʹରԠ͍ͯ͠ΔࣄΛએݴ͢Δ • طଘͷςʔϚʢୈࡾऀ࡞੒ʣ͕͋Δ৔߹͸ࢠςʔϚར༻ • action hook ͳͲͰσβΠϯΛ৮Δ͜ͱ΋ग़དྷΔ͚Ͳɺج ຊతʹ͸template fileͷར༻ΛΦεεϝ
14. 4. ςʔϚ࡞੒ͷجຊ
 8PP$PNNFSDFಠࣗͷσβΠϯΛςʔϚ಺Ͱௐ੔͢Δ • جຊςϯϓϨʔτ͸ /woocommerce/template/ ಺ • ςʔϚ಺ʹ /your-theme/woocommerce/ ͱ͍͏ϑΥϧμΛ࡞Δ • ςϯϓϨʔτ಺ͷ action hook ౳͸ઈରʹ࡟আͨ͠Βμϝɻ • PHP։ൃ͕ग़དྷΔͷͳΒग़དྷΔ͔͗ΓtemplateϑΝΠϧΛ৮ Βͳ͍Α͏ʹ͢ΔɻʢຊՈਪ঑ʣ
15. 4. ςʔϚ࡞੒ͷجຊ
 ςϯϓϨʔτϑΝΠϧΛৗʹ࠷৽ঢ়ଶ΁ • όʔδϣϯΞοϓͷࡍʹ݁ߏͳස౓Ͱมߋ͞ΕΔ • όʔδϣϯΞοϓͷࡍʹςϯϓϨʔτϑΝΠϧ͕ݹ͘ͳͬ ͍ͯͳ͍͔νΣοΫ • ରԠ͠ͳ͍ͱ࢖͑ͳ͍ϓϥάΠϯͳͲ͕ग़ͯ͘Δ
16. 5. WooCommerce ͷ filter hook ٴͼ action hook
 ௥Ճػೳ͸֦ுػೳϓϥάΠϯΛར༻ • ػೳ֦ுϓϥάΠϯ͸ଟ਺͋ΔͷͰɺ·ͣ͸୳ͦ͏ɻ • جຊతʹ͸ެࣜαΠτͷϓϥάΠϯͷํ͕҆৺ɻ • functions.php Ͱػೳ௥ՃΛ͢Δ৔߹͸͔ͬ͠Γͱ؅ཧΛɻ
17. 5. WooCommerce ͷ filter hook ٴͼ action hook
 ػೳతͳ෺͸ग़དྷΔ͚ͩ
    GVODUJPOTQIQ
    ʹͯ
    pMUFS
    IPPL
    ͔
    BDUJPO
    IPPL
    Λ࢖͏ • σβΠϯ͸جຊతʹςϯϓϨʔτϑΝΠϧͱCSSͰɻ • javascript ͷίϯϑϦΫτʹ஫ҙ͕ඞཁɻ • ػೳ֦ுϓϥάΠϯ͕ແ͍৔߹͸functions.phpͰ࣮૷ɻ
18. ࢀߟ URL • ςʔϚͷ࡞੒ - WordPress Codex ೔ຊޠ൛ • ࢠςʔϚ - WordPress Codex ೔ຊޠ൛ • WooCommerce४ڌςʔϚ࡞੒ํ๏ʢӳޠʣ WooCommerce 3.0.x Code Reference (API) • WooCommerce ։ൃऀϒϩά • WooCommerce ։ൃGITHUB • WooCommerce ςϯϓϨʔτҰཡ