ゼロコーディングで WordPress サイト制作ハンズオン

WordCamp Kansai 2016 （ https://2016.kansai.wordcamp.org/ ）で行われたハンズオンのスライドです。

その他、資料はこちら
https://github.com/wckansai2016/zerocoding-hands-on/blob/master/README.md

Transcript

1. θϩίʔσΟϯάͰ
   8PSE1SFTTαΠτ੍࡞
   ϋϯζΦϯ
   
   8PSE$BNQ,BOTBJ
   ຊ೔ͷઆ໌ࢿྉ͸ͪ͜Β͔Β
   IUUQTHJUIVCDPNXDLBOTBJ[FSPDPEJOHIBOETPO
   

   View Slide

2. ੈ࿩໾ͷ঺հ
   γϚΩϣ΢εέ
   IUUQTTIJNBLZPITVLFDPN
   5XJUUFS!TIJNB@Y@P
   σβΠϯ੡࡞ձࣾͰϚʔΫΞοϓΤϯδχΞΛ͍ͯ͠·͢ɻ
   

   View Slide

3. ੈ࿩໾ͷ঺հ
   ઒Ҫণ඙
   IUUQXXXDIFSSZQJFXFCDPN
   5XJUUFS!TBLVSBHJ@LFJ
   'BDFCPPLNBTBLBXBJ
   ژ౎෎෣௽ࢢͰϑϦʔϥϯεͱͯ͠8FCɾ%51੍࡞Λߦ͍ͬͯ·͢ɻ
   ೥ؒͷ౦ژͷ੍࡞ձࣾͰͷ༷ʑͳܦݧ͔ΒɺఏҊɾݟੵɾσΟϨΫγϣϯɾ
   ϫʔΫϑϩʔߏஙɾσβΠϯɾϓϩάϥϛϯάɾސ٬αϙʔτ·Ͱ͜ͳ͢ʮϑϧ
   ελοΫʢʁʣɾϑϦʔϥϯεʯͰ͢ɻγϩϋϥΠϯίͱࠇࣲ͍ݘͷύύͰ͢ɻ
   

   View Slide

4. ੈ࿩໾ͷ঺հ
   ;͍ͨͨͧ͡͏
   IUUQKVOPOFUCJ[
   'BDFCPPLUBJ[PGVKJUB
   +VOPOFUͱ͍͏԰߸ͰϑϦʔϥϯεͷ8԰Λ΍͍ͬͯ·͢ɻ
   ຊۀΛҿ৯ళܦӦ͔Β8੍࡞΁ม͑ͨͨΊɺ೥ΑΓ8PSE#FODIਆށʹ
   ࢀՃ͠ɺܹࢗͱ஌ࣝΛ΋Β͍࢓ࣄʹͭͳ͍͛ͯ·͢ɻ
   

   View Slide

5. ੈ࿩໾ͷ঺հ
   ·ΏͶ͐
   େࡕͷ੍࡞ձࣾͰओʹ8FC੍࡞Λ͍ͯ͠·͢ɻσΟϨΫγϣϯ͔ΒσβΠϯɺίʔ
   σΟϯά
   ɺ8PSE1SFTTςʔϚ࡞੒·Ͱ΍Γ·͢ɻ΋ͱ΋ͱ͸%51σβΠϯΛ͍ͯ͠
   ͨͨΊɺύϯϑϨοτɾϑϥΠϠʔ౳ͷࢴഔମσβΠϯ΋ՄೳͰ͢ɻ޷͖ͳ΋ͷ͸ɺ
   8PSE1SFTTͱϩοΫͱंͰ͢ɻ
   IUUQNBIJSPDLDPN
   5XJUUFS!NBZV@XFC
   'BDFCPPLNBZV
   

   View Slide

6. ੈ࿩໾ͷ঺հ
   ZPSJ
   IUUQZPSJDPN
   5XJUUFS!ZPSJ@PUJN
   'BDFCPPLZPSJZBTVOJTIJNVSB
   େࡕͷ੍࡞ձࣾͰϚʔΫΞοϓΤϯδχΞΛ͍ͯ͠·͢ɻ
   

   View Slide

7. ׂ࣌ؒ
   w ࠓ೔΍Δ͜ͱൃදʢ෼ʣˡࠓίί
   w 8PSE1SFTTͷ࠷ॳͷઃఆʢ෼ʣ
   w νʔϜ෼͚ʢ෼ʣ
   w ΋͘΋͘ʢ෼ʣ˞ద౰ʹٳܜ͍ͯͩ͘͠͞Ͷʂ
   w Ϋϩʔδϯάʢ෼ʣ
   

   View Slide

8. ࠓ೔΍Δ͜ͱ
   

   View Slide

9. ࠓ೔΍Δ͜ͱ
   w )5.-ɾ$44ɾ+BWB4DSJQUɾ1)1ͱ͍ͬͨྨͷίʔυΛॻ
   ͔ͣʹ8PSE1SFTTαΠτΛ࡞Δɻ

   ʢγϣʔτίʔυͷίϐϖ͸ηʔϑͱ͢Δɻʣ
   

   View Slide

10. ࠓ೔΍Βͳ͍͜ͱ
    

    View Slide

11. ࠓ೔΍Βͳ͍͜ͱ
    w )5.-ɾ$44ɾ+BWB4DSJQUɾ1)1ͱ͍ͬͨྨͷίʔυΛॻ
    ͔ͳ͍
    w ςʔϚͷ࡞Γํ
    w ςʔϚͷࢠςʔϚԽ
    w ϓϥάΠϯͷ࡞Γํ
    w αϯϓϧαΠτʹ࢖༻͍ͯ͠ͳ͍ϓϥάΠϯͷ࢖͍ํ
    

    View Slide

12. ίʔυΛॻ͔ͳ͍ͱ
    ࣮ݱͰ͖ͳ͍͜ͱΛཧղͯ͠
    ΋Β͏ͨΊͷϋϯζΦϯͰ͢ʂ
    

    View Slide

13. ࠓ೔΍Δ͜ͱͷྲྀΕ
    

    View Slide

14. ࠓ೔΍Δ͜ͱͷྲྀΕ
    w ͪ͜ΒͰ༻ҙͨ͠ҎԼͭͷαϯϓϧαΠτͷ಺ͷͭΛ
    νʔϜʹ෼͔Εͯ࡞੒͠·͢ɻ
    w ϒϩάαΠτʢςΩετ͕த৺ʣ
    w ΪϟϥϦʔαΠτʢࣸਅɾΠϥετ͕த৺ʣ
    w ίʔϙϨʔταΠτʢஂମɾاۀͳͲ͓ݎ͍ܥʣ
    w γϣοϓαΠτʢࡶ՟ɾεΠʔπͳͲ؇͍ܥʣ
    

    View Slide

15. ࡞੒͢ΔαΠτͷ঺հ
    

    View Slide

16. ࡞੒͢ΔαΠτͷ঺հ
    ࢖༻ͨ͠ςʔϚ
    ɾ5XFOUZ4JYUFFO
    

    ࢖༻ͨ͠ओͳϓϥάΠϯ
    ɾ8PSE1SFTT1PQVMBS1PTUT
    ɾ5BCMFPG$POUFOUT1MVT
    ಛ௃
    ɾਓؾهࣄͷදࣔ

    ɾهࣄ಺ʹ໨࣍ΛࣗಈͰੜ੒
    ϒϩάαΠτ
    

    View Slide

17. ࢖༻ͨ͠ςʔϚ
    ɾ0SWJT
    

    ࢖༻ͨ͠ओͳϓϥάΠϯ
    ɾ+FUQBDL
    ɾ&BTZ'BODZ#PY
    ಛ௃
    ɾࣸਅ΍ΠϥετΛத৺ʹදࣔ
    ࡞੒͢ΔαΠτͷ঺հ
    ΪϟϥϦʔαΠτ
    

    View Slide

18. ࡞੒͢ΔαΠτͷ঺հ
    ίʔϙϨʔταΠτ
    ࢖༻ͨ͠ςʔϚ
    ɾ-JHIUOJOH
    

    ࢖༻ͨ͠ओͳϓϥάΠϯ
    ɾ*NBHF8JEHFU
    ɾ4JNQMF.BQ
    ಛ௃
    ɾΧϥϜͷσβΠϯͷςʔϚΛ
    ࢖༻
    

    View Slide

19. ࡞੒͢ΔαΠτͷ঺հ
    γϣοϓαΠτ
    ࢖༻ͨ͠ςʔϚ
    ɾ(SBQIZ
    

    ࢖༻ͨ͠ओͳϓϥάΠϯ
    ɾ.FOV*NBHF
    ɾ5JOZ.$&"EWBODFE
    ಛ௃
    ɾΧϥϜͷσβΠϯͷςʔϚΛ
    ࢖༻
    

    View Slide

20. ͜ͷαΠτ͸Ͳ͏΍ͬͯ࡞ͬͯΔͷʁ
    ˠखΛಈֶ͔ͯ͠ͼ·͠ΐ͏ʂ
    

    View Slide

21. 8PSE1SFTTͷ࠷ॳͷઃఆ
    

    View Slide

22. 8PSE1SFTTͷ࠷ॳͷઃఆ
    ҎԼͷϖʔδͰઆ໌͍ͨ͠·͢ɻ
    63-
    IUUQTHJUIVCDPNXDLBOTBJ[FSPDPEJOHIBOETPOCMPC
    NBTUFSqPXBMMNE
    ͢ͰʹઃఆࡁΈͷํ΋͓ΒΕΔ͔ͱࢥ͍·͢ͷͰۦ͚଍Ͱઆ໌͠·
    ͢ɻ
    Θ͔Βͳ͍͜ͱ͕͋Ε͹ੈ࿩໾ʹฉ͍͍ͯͩ͘͞Ͷɻ
    

    View Slide

23. ॾ஫ҙ
    w ੈ࿩໾͸8PSE1SFTTͷ͜ͱΛશͯཧղ͍ͯ͠Δ௒ਓͰ͸͝
    ͍͟·ͤΜɻ
    w ࠓճͷϋϯζΦϯͰ͸ɺͪ͜Β͕ࢦఆͨ͠ςʔϚɺϓϥά
    ΠϯͷΈΛ࢖༻͍ͯͩ͘͠͞ɻ

    ʢ਺ઍ͋ΔςʔϚɺϓϥάΠϯ͢΂ͯͷ࢖͍ํΛख़஌ͯ͠
    ͍ΔΘ͚Ͱ͸͍͟͝·ͤΜɻ·ͨςʔϚʹΑͬͯ͸૝ఆ͠
    ͨػೳ͕࢖͑ͳ͍ࣄ͕͋ΔͨΊͰ͢ɻʣ
    

    View Slide

24. ͱ͍͏͜ͱͰɺ
    νʔϜ෼͚ʂ
    

    View Slide

25. ΋͘΋͘࡞ۀ։࢝ͷલʹ
    w νʔϜ಺Ͱࣗݾ঺հ͠Α͏ʂ
    w ໊͓લʢϋϯυϧωʔϜͰ΋΋ͪΖΜ0,ʂʣ
    w ݱࡏͷ৬छʢ΋ͪΖΜൿີͰ΋0,ʂʣ
    w 8PSE1SFTTͰ΍Γ͍ͨ͜ͱΞϨ͹ੋඇ͓࿩Λʂ
    w ٳܜ͸ద౰ʹͱ͍ͬͯͩ͘͞Ͷʔ
    

    View Slide

26. ϨοπνϟϨϯδʂ
    

    View Slide

27. ·ͱΊ
    w ίʔυΛॻ͔ͳͯ͘΋͋Δఔ౓ͷ8FCαΠτ͕࡞ΕΔʂ
    w ݟͨ໨Λ੔͍͑ͨͳΒɺ)5.-ɾ$44Λཧղ͠Α͏ʂ
    w αΠτ಺ͰෳࡶͳॲཧΛ͍ͨ͠ͳΒ1)1·ͨ͸
    8PSE1SFTTؔ਺Λཧղ͠Α͏ʂ
    w ςʔϚͱϓϥάΠϯΛ୳͢ͷ͸͚ͬ͜͏೉͍͠ɻɻ

    

    ͦΜͳ࣌ʹ͸ʜʜ
    

    View Slide

28. ίϛϡχςΟʹࢀՃ͠Α͏ʂ
    ʮ8PSE#FODIʯͱݕࡧʂʂ
    

    View Slide

29. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    ͝ײ૝͓଴͓ͪͯ͠Γ·͢ʂ

    ϋογϡλά͸ͪ͜Β
    XDL
    

    View Slide