Drupal テーマ開発入門講座 第7回 テーマ設定のカスタマイズ

https://www.acquia.com/jp/events/webinars/drupal-theming-development-vol7

Transcript

1. ୈ7ճ ςʔϚઃఆͷΧελϚΠζ Drupal ςʔϚ ։ൃೖ໳ߨ࠲
2. Drupal ςʔϚ։ൃೖ໳ߨ࠲γϦʔζ – Drupalʹ͓͚ΔʮςʔϚʯͱ͸ɺWebαΠτͷݟͨ໨Λ୲͏ػೳͰ͢ɻຊ΢ΣϏφʔγϦʔ ζͰ͸ɺDrupalͷςʔϚ։ൃʹؔ͢Δجૅ஌ࣝΛղઆ͠·͢ɻ – DrupalͷϑϩϯτΤϯυपΓʹ͍ͭͯମܥతʹֶͼ͍ͨํɺࣗ෼ͰΧελϜςʔϚΛ࡞Ε ΔΑ͏ʹͳΓ͍ͨํɺΞΫΠΞೝఆσϕϩούʔࢼݧΛ໨ࢦ͢ํʹ͓͢͢ΊͰ͢ɻ – DrupalΛҰ௨Γૢ࡞ͨ͜͠ͱ͕͋ΔํΛର৅ͱ͍ͯ͠·͢ɻ·ͩDrupalΛ৮ͬͨ͜ͱ͕ແ ͍ํ͸ɺॳ৺ऀ޲͚DrupalνϡʔτϦΞϧಈըʢ೔ຊޠʣΛઌʹݟ͓ͯ͘ͱΑΓཧղ͕ਂ ·Γ·͢ɻ
3. 1. ςʔϚݻ༗ͷઃఆ 2. ςʔϚઃఆΛΧελϚΠζ͢Δ 3. ςʔϚͷઃఆ஋Λ࢖༻͢Δ 4. ςʔϚΠϯετʔϧ࣌ʹॳظ஋Ληοτ͢Δ 5. ࿅श໰୊ ΞδΣϯμ
4. ςʔϚݻ༗ͷઃఆ
5. – ςʔϚͷΠϯετʔϧ – ςʔϚͷΞϯΠϯετʔϧ – σϑΥϧτςʔϚͷ੾Γସ͑ – ৽͍͠ςʔϚͷ௥Ճ 
 ʢUpdate ManagerϞδϡʔϧͰఏڙʣ 
 ※ςʔϚͷ௥Ճ͸Ϟδϡʔϧಉ༷ɺcomposerͰߦ͏ํ๏͕ਪ ঑͞Ε͍ͯ·͢ɻ – ݸʑͷςʔϚݻ༗ͷઃఆ ؅ཧϝχϡʔʮςʔϚʯͰͰ͖Δ͜ͱ
6. ݸʑͷςʔϚݻ༗ͷઃఆ ηΫγϣϯλϒͷʮઃఆʯ(/admin/appearance/settings)͔Βɺ 
 ֤ςʔϚ͝ͱʹݻ༗ͷઃఆ͕ߦ͑Δϖʔδ͕༻ҙ͞Ε͍ͯ·͢ɻ
7. σϑΥϧτͰ༻ҙ͞Ε͍ͯΔઃఆ߲໨ – ϖʔδཁૉͷදࣔͷઃఆ – ϩΰը૾ͷઃఆ – ͓ؾʹೖΓΞΠίϯͷઃఆ ʹؔͯ͠͸ɺΧελϜςʔϚଆ ͰԿ΋͠ͳͯ͘΋ɺσϑΥϧτ Ͱ༻ҙ͞Ε·͢ɻ
8. ίϯτϦϏϡʔτςʔϚͷςʔϚઃఆΛ೷͍ͯΈΑ͏ Bootstrap Barrioͷ৔߹ ςʔϚಠࣗͷઃఆ߲໨
9. ίϯτϦϏϡʔτςʔϚͷςʔϚઃఆΛ೷͍ͯΈΑ͏ W3CSSͷ৔߹ ςʔϚಠࣗͷઃఆ߲໨
10. ςʔϚઃఆͷΧελϚΠζ Drupal 8Ҏ߱Ͱ͸ɺ *.theme ϑΝΠϧ ·ͨ͸ theme-settings.php ϑΝΠϧʹPHPؔ਺Λ௥Ճ͢Δ͜ͱʹΑΓɺςʔϚઃఆͷϑΥʔϜ ΛมߋͰ͖·͢ɻ
11. ςʔϚઃఆΛΧελϚΠζ͢Δ
12. ςʔϚઃఆΛΧελϚΠζ͢Δํ๏ 1. ςʔϚσΟϨΫτϦʹ *.theme ϑΝΠϧ ΋͘͠͸ theme- settings.php ϑΝΠϧΛ༻ҙ͠·͢ɻ 2. ༻ҙͨ͠ϑΝΠϧ಺Ͱ THEME_form_system_theme_settings_alterؔ਺Λ࣮૷͠· ͢ɻ
13. <?php use Drupal\Core\Form\FormStateInterface; function marucha_form_system_theme_settings_alter(&$form, FormStateInterface $form_state) { $form['twitter_url'] = array( '#type' => 'textfield', '#title' => t('Twitter URL'), '#description' => t(“TwitterΞΧ΢ϯτͷURLΛೖྗ͠·͢ɻ"), '#default_value' => theme_get_setting('twitter_url'), ); } γϯϓϧͳΧελϚΠζ theme-settings.php ઃఆϖʔδʹςΩετ ϑΟʔϧυ͕௥Ճ͞Ε· ͢ɻ
14. hook_form_system_theme_settings_alter() ͷ࢓༷ – ςʔϚ͕ςʔϚݻ༗ͷઃఆϑΥʔϜΛมߋͰ͖ΔΑ͏ʹ͢ΔϑοΫؔ਺Ͱ͢ɻ – ͜ͷϑοΫΛ࢖༻͢ΔͱɺϑΥʔϜཁૉͷ௥ՃɺσϑΥϧτ஋ͷมߋɺϑΥʔ Ϝཁૉͷ࡟আͳͲɺDrupalͷForm APIͰڐՄ͞Ε͍ͯΔํ๏ͰςʔϚݻ༗ͷઃ ఆϑΥʔϜΛมߋͰ͖·͢ɻ 
 – ؔ࿈υΩϡϝϯτ – function hook_form_system_theme_settings_alter (Drupal API) – function hook_form_FORM_ID_alter (Drupal API) – Introduction to Form API (Drupal Wiki) – Form and render elements (Drupal API)
15. ԋश ΧελϜςʔϚͷઃఆϖʔδʹςΩετϑΟʔϧυΛ1ͭ௥Ճͯ͠Έ Α͏ – theme-settings.php ϑΝΠϧͷ࡞੒ – ؔ਺ͷ࣮૷ ԋशͰ࢖༻͢Διʔείʔυ͸Githubʹ͋Γ·͢ɻ https://github.com/hmaruyama/my-drupal9-theming/tree/vol7
16. ςʔϚͷઃఆ஋Λ࢖༻͢Δ
17. theme_get_settingؔ਺ – ςʔϚͷPHPϑΝΠϧͰɺtheme_get_setting ؔ਺Λݺͼग़͢͜ ͱͰϢʔβʔ͕ςʔϚઃఆϖʔδͰઃఆͨ͠஋ΛऔಘͰ͖·͢ɻ theme_get_setting('twitter_url');
18. TwigςϯϓϨʔτͰઃఆ஋Λ࢖༻͢Δ ઃఆ஋ΛςϯϓϨʔτϑΝΠϧʹ౉͢ʹ͸ɺϓϦϓϩηεؔ਺Ͱɺtheme_get_settingؔ਺Λ࢖༻ͯ͠ઃ ఆ஋Λऔಘ͠ɺvariables഑ྻʹ୅ೖ͠·͢ɻ function marucha_preprocess_page(&$variables) { $variables['twitter_url'] = theme_get_setting('twitter_url'); } marucha.theme ͦ͏͢Δ͜ͱͰɺtwigϑΝΠϧ಺Ͱ௨ৗͷTwigม਺ͱಉ͡Α͏ʹΞΫηεͰ͖·͢ɻ <li><a href="{{ twitter_url }}" target="_blank">Twitter</a></li> page.html.twig
19. ԋश ઃఆ஋ΛTwigςϯϓϨʔτͰ࢖༻ͯ͠ΈΑ͏ – *.themeϑΝΠϧʹϓϦϓϩηεؔ਺Λ࣮૷ – TwigςϯϓϨʔτͷฤू ԋशͰ࢖༻͢Διʔείʔυ͸Githubʹ͋Γ·͢ɻ https://github.com/hmaruyama/my-drupal9-theming/tree/vol7
20. ςʔϚΠϯετʔϧ࣌ʹ ॳظ஋Ληοτ͢Δ
21. ςʔϚʹॳظ஋Ληοτ͢Δ – ςʔϚઃఆʹ͸ɺॳظ஋Λઃఆ͢Δ͜ͱ͕ՄೳͰ͢ɻ – ςʔϚσΟϨΫτϦʹ config/install/*.settings.yml ϑΝΠϧΛ࡞੒͠ɺ͜ͷ தͰ௥Ճ͢ΔϑΥʔϜཁૉͷॳظ஋ΛΩʔόϦϡʔܗࣜͰηοτ͠·͢ɻ – ͜ͷॳظ஋͸ςʔϚͷΠϯετʔϧ࣌ʹ൓ө͞Ε·͢ɻ logo: use_default: false # ςʔϚͷϩΰը૾Λ࢖༻͠ͳ͍ twitter_url: 'https://twitter.com' # Twitter URLͷσϑΥϧτ஋ config/install/marucha.settings.yml
22. ԋश ΧελϜςʔϚͷςʔϚઃఆʹॳظ஋Ληοτͯ͠ΈΑ͏ – config/install/*.settings.yml ϑΝΠϧΛ࡞੒ – ςʔϚΛ࠶Πϯετʔϧͯ͠ɺॳظ஋͕ηοτ͞ΕΔ͔֬ೝ ԋशͰ࢖༻͢Διʔείʔυ͸Githubʹ͋Γ·͢ɻ https://github.com/hmaruyama/my-drupal9-theming/tree/vol7
23. ࿅श໰୊
24. ΧελϜςʔϚͰςʔϚઃఆΛΧελϚΠζ͢ΔࡍʹɺͲͷϑΝΠϧʹϑοΫؔ ਺Λهड़Ͱ͖·͔͢ʁ2ͭબ୒͍ͯͩ͘͠͞ɻ 1. *.theme 2. src/Form/SettigsForm.php 3. index.php 4. theme-settings.php ࿅श໰୊1
25. ΧελϜςʔϚͰςʔϚઃఆΛΧελϚΠζ͢ΔࡍʹɺͲͷϑΝΠϧʹϑοΫؔ ਺Λهड़Ͱ͖·͔͢ʁ2ͭબ୒͍ͯͩ͘͠͞ɻ 1. *.theme 2. src/Form/SettigsForm.php 3. index.php 4. theme-settings.php ࿅श໰୊1 ਖ਼ղɿ1, 4
26. ςʔϚݻ༗ͷઃఆʹॳظ஋Λ༻ҙ͢ΔࡍʹɺඞཁͳϑΝΠϧ͸࣍ͷ͏ͪͲΕ Ͱ͔͢ʁ 1. *.settings.yml 2. config/install/*.settings.yml 3. config/schema/*.schema.yml 4. theme-settings.php 5. *.theme ࿅श໰୊2
27. ςʔϚݻ༗ͷઃఆʹॳظ஋Λ༻ҙ͢ΔࡍʹɺඞཁͳϑΝΠϧ͸࣍ͷ͏ͪͲΕ Ͱ͔͢ʁ 1. *.settings.yml 2. config/install/*.settings.yml 3. config/schema/*.schema.yml 4. theme-settings.php 5. *.theme ࿅श໰୊2 ਖ਼ղɿ2
28. ຊ೔ͷΞδΣϯμ͸ऴྃ
29. 1. ςʔϚݻ༗ͷઃఆ 2. ςʔϚઃఆΛΧελϚΠζ͢Δ 3. ςʔϚͷઃఆ஋Λ࢖༻͢Δ 4. ςʔϚΠϯετʔϧ࣌ʹॳظ஋Ληοτ͢Δ 5. ࿅श໰୊ ΞδΣϯμ