はじめに
本スキンのファイル構成および各ファイルの機能について、詳細に説明しています。
この資料を通じて、スキンの設計仕様や、利用可能なカスタマイズ方法を理解することができます。
ファイル構成
- skin-made-in-heaven
- lib
- function.php
- hook-cocoon.php
- hook-wp.php
- panel-color.php
- panel-editor.php
- panel-main.php
- panel-option.php
- panel-visual.php
- tmp
- scroll
- s-1.php
- s-2.php
- s-3.php
- s-4.php
- s-5.php
- load
- ball.php
- camera.php
- cube.php
- heart.php
- welcome.php
- css-custom.php
- css-editor.php
- js-custom.php
- list-category-columns.php
- scroll
- assets
- css
- l
- ball.css
- camera.css
- cube.css
- heart.css
- l.csv
- welcome.css
- h2
- h2-1.css
- h2-10.css
- h2-11.css
- h2-12.css
- h2-13.css
- h2-14.css
- h2-2.css
- h2-3.css
- h2-4.css
- h2-5.css
- h2-6.css
- h2-7.css
- h2-8.css
- h2-9.css
- h2.csv
- h3
- h3-1.css
- h3-2.css
- h3-3.css
- h3-4.css
- h3-5.css
- h3-6.css
- h3-7.css
- h3-8.css
- h3.csv
- h4
- h4-1.css
- h4-2.css
- h4.csv
- s
- s-1.css
- s-2.css
- s-3.css
- s-4.css
- s-5.css
- s.csv
- w
- w-1.css
- w-2.css
- w-3.css
- w-4.css
- w-5.css
- w-6.css
- w-7.css
- w-8.css
- w.csv
- admin.css
- customize.css
- original.css
- l
- img
- 1.gif
- 2.gif
- 3.gif
- camera.svg
- pattern
- compare-box.json
- js
- block-extensions.js
- css
- functions.php
- style.css
- lib
function.php
スキン独自関数を、以下に示す。
| # | 名称 | 内容 |
|---|---|---|
| hvn_add_header | メインビジュアル出力 | |
| hvn_add_inline_css | インラインCSS出力 | |
| hvn_breadcrumbs_root_text_custom | パンくず「ホーム」変更 | |
| hvn_category_title_format_mapping | 投稿・固定ページタイトルをカテゴリー・タグページに反映 | |
| hvn_color_css | 基本カラーCSS追加 | |
| hvn_color_mix_rgb | カラーコードを%薄いRGB、HEXコード変換 | |
| hvn_comment_meta_post_icon | コメントアイコン追加 | |
| hvn_custom_columns_content | ダッシュボード投稿・固定ページ一覧カラムにデータ出力 | |
| hvn_custom_css | カスタムCSS追加 | |
| hvn_editor_css | エディターCSS追加 | |
| hvn_editor_css_cache_file | エディター用CSSキャッシュファイル名取得 | |
| hvn_font_setting | フォントライブラリ取得 | |
| hvn_get_title_settings | フロントページタイトル設定 | |
| hvn_h2_h4_css | 見出しデザインCSS追加 | |
| hvn_image_count | スライド画像数取得 | |
| hvn_like_ajax | エントリーカードいいねボタン | |
| hvn_like_tag | いいね数出力 | |
| hvn_menu_setting | カスタマイザーメニュー設定 | |
| hvn_panel_control | カスタマイザーコントロール | |
| hvn_panel_label | カスタマイザーラベル出力 | |
| hvn_render_circular_text_block | 「回転テキスト」ブロック出力 | |
| hvn_sanitize_color | 16進チェック | |
| hvn_sanitize_number_range | 数字チェック | |
| hvn_sanitize_text | テキストチェック | |
| hvn_sns_brand_color_replace | SNSシェア、フォローボタン変更 | |
| hvn_wave | 波線出力 |
hook-cocoon.php
使用するCocoonのフックを以下に示します。
アクションフック
| # | 名称 | 内容 |
|---|---|---|
| cocoon_part_after__tmp/footer-javascript | カスタムJS追加 | |
| cocoon_part_before__tmp/appeal | メインビジュアル追加 | |
| entry_card_snippet_after | エントリーカードいいねボタン追加 | |
| widget_entry_card_date_before | ウィジェットいいねボタン追加 | |
| wp_enqueue_scripts_before_skin_style | フロントCSS追加 |
フィルターフック
| # | 名称 | 内容 |
|---|---|---|
| body_class_additional | bodyクラス追加 | |
| breadcrumbs_page_root_text | 「パンくず」テキスト変更 | |
| breadcrumbs_single_root_text | 「パンくず」テキスト変更 | |
| cocoon_admin_bar_menus | Cocoon独自メニューに「ログアウト」追加 | |
| cocoon_gutenberg_stylesheets | エディター設定CSSをGutenbergエディターにインライン追加 | |
| cocoon_menu_definitions | Cocoon独自メニュー「テンプレート」削除 | |
| cocoon_part__tmp/author-box | プロフィール背景動画追加 | |
| cocoon_part__tmp/css-custom | CocoonカスタムCSS変更 | |
| cocoon_part__tmp/date-tags | 投稿ページいいねボタン追加 | |
| cocoon_part__tmp/footer-bottom | ダークモードボタン追加 | |
| cocoon_part__tmp/footer-javascript | Swiperマージン変更 | |
| cocoon_part__tmp/list | カテゴリーごと間波線追加 | |
| cocoon_part__tmp/list-tab-index | タブ一覧「新着記事」を非表示 | |
| cocoon_part__tmp/pager-page-links | 分割ページのページネーションのデザイン変更 | |
| cocoon_part__tmp/popular-card | PV位置変更 | |
| cocoon_part__tmp/recommended-cards | おすすめカードSwiper自動再生 | |
| cocoon_part__tmp/sns-follow-buttons | プロフィールSNSフォロー表示 | |
| cocoon_part__tmp/sns-share-buttons | タイトルとURLをコピー変更 | |
| cocoon_part_args__tmp/widget-entry-card | ナビカードリボン設定より投稿を優先し設定 | |
| cocoon_theme_block_categories | 独自ブロックカテゴリー追加 | |
| featured_image_background_color_code | アイキャッチ自動生成（背景カラー） | |
| featured_image_border_color_code | アイキャッチ自動生成（枠カラー） | |
| featured_image_text_color_code | アイキャッチ自動生成（テキストカラー） | |
| front_page_type_map | オリジナルレイアウト変更 | |
| get_additional_sns_follow_button_classes | モバイルSNSフォローボタンカラー変更 | |
| get_additional_sns_share_button_classes | モバイルSNSシェアボタンカラー変更 | |
| get_archive_chapter_title | 検索件数表示 | |
| get_notice_area_message | 通知エリア更新 | |
| get_toc_tag | 目次表示チェック | |
| list_category_column_atts | カテゴリーごと（2、3カード）変更 | |
| list_category_tab_args | タブ一覧表示件数変更 | |
| more_button_caption | 「もっと見る」テキスト変更 | |
| pagination_next_link_caption | 「次のページ」テキスト変更 | |
| popular_entry_card_pv_text | PV数表示変更 | |
| recommend_cards_navi_list_atts | おすすめカードSwiper変更 | |
| the_author_box_description | サイト開設経過日数追加 | |
| widget_entries_args | 新着記事にコメント数順を追加 |
hook-wp.php
使用するWordPressのフックを以下に示します。
アクションフック
| # | 名称 | 内容 |
|---|---|---|
| add_meta_boxes_comment | コメントカスタムフィールド追加 | |
| admin_bar_menu | adminバー変更 | |
| admin_footer | 管理画面追加 | |
| admin_footer-edit.php | クイック編集値表示 | |
| admin_init | タクソノミー一覧にカラム追加 | |
| admin_post_delete_date | 更新日クリア | |
| after_setup_theme | リンクマネージャ非表示 | |
| before_delete_post | フォント削除に連携しオプション削除 | |
| comment_post | カスタムフィールド出力 | |
| customize_controls_enqueue_scripts | カスタマイザーCSS追加 | |
| customize_register | カスタマイザー追加 | |
| customize_save_after | エディター用CSSファイルキャッシュ保存 | |
| edit_comment | コメントを編集カスタムフィールド更新 | |
| enqueue_block_assets | GutenbergエディターCSS追加 | |
| enqueue_block_editor_assets | Gutenbergエディター用JS追加 | |
| in_widget_form | 「タグクラウド」ウィジェットオプション追加 | |
| init | テーマ初期化処理 | |
| manage_comments_custom_column | コメント一覧にアイコンカラム追加 | |
| manage_pages_custom_column | カラムにデータ出力 | |
| manage_posts_custom_column | カラムにデータ出力 | |
| pre_get_posts | メインクエリの制御（表示件数・検索・並び替え） | |
| quick_edit_custom_box | クイック編集入力フォーム追加 | |
| restrict_manage_posts | 投稿一覧にPVフィルター追加 | |
| save_post | クイック編集カスタムフィールド更新 | |
| template_redirect | リダイレクト・ページ制御 | |
| wp_ajax_hvn_like_action | エントリーカードいいねボタン | |
| wp_ajax_nopriv_hvn_like_action | ||
| wp_body_open | ローディング画面、目次ボタン追加 | |
| wp_head | オプション更新 |
フィルターフック
| # | 名称 | 内容 |
|---|---|---|
| comment_form_field_comment | コメントフォーム追加 | |
| get_archives_link | アーカイブ日付をY-m形式変更 | |
| get_avatar | アバター変更 | |
| get_calendar | カレンダー日付をY-m形式変更 | |
| manage_edit-comments_columns | コメント一覧にカスタムフィールド追加 | |
| manage_edit-post_sortable_columns | 「更新日付」カラムにソート追加 | |
| manage_pages_columns | ダッシュボード固定ページ一覧にカラム追加 | |
| manage_post_posts_columns | ダッシュボード投稿一覧にカラム追加 | |
| option_date_format | RSS日付Y-m-d形式変更 | |
| option_time_format | ||
| post_class | NEWマーク、リボン追加 | |
| post_date_column_time | ダッシュボード投稿・固定ページ一覧を24時間表示 | |
| posts_search_orderby | 検索結果を投稿日順 | |
| posts_where | コメント数で絞り込み | |
| render_block | ブロック変更 | |
| render_block_core/image | 「画像」ブロックに拡大効果リンク設定 | |
| the_author_box_name | プロフィールリンク変更 | |
| the_content | 本文先頭に目次追加 | |
| widget_display_callback | アーカイブをアコーディオン表示 | |
| widget_tag_cloud_args | 「タグクラウド」ウィジェット設定 | |
| widget_title | ウィジェットタイトルHTML入力 | |
| widget_update_callback | 「タグクラウド」ウィジェット設定フォーム更新 | |
| wp_nav_menu | モバイルメニュー見出し追加 | |
| wp_tag_cloud | タグクラウド独自表示 |
その他
| # | ファイル名 | 内容 |
|---|---|---|
| panel-color.php | 基本カラーパネル定義 | |
| panel-eitor.php | エディターパネル定義 | |
| panel-main.php | 拡張パネル定義 | |
| panel-option.php | オプションパネル定義 | |
| panel-visual.php | メインビジュアルパネル定義 | |
| css-custom.php | カスタムCSS | |
| css-editor.php | エディター設定CSS | |
| js-custom.php | カスタムJavaScript | |
| list-category-columns.php | オリジナルレイアウトテンプレート |
