テーマ
Twenty Twenty-Four を複製してテーマを作成
function.php
function.php
// headタグ内に挿入したいコード処理
function add_wp_fontawesome() {
?>
<!-- ◆ここにFont Awesomeを読み込ませるためのコードを設置 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
<?php
}
// add_actionにてwp_headにadd_wp_fontawesomeの処理を追加
add_action('wp_head', 'add_wp_fontawesome');
/**
* bodyタグ開始に挿入
*/
add_action( 'wp_body_open', function() {
?>
<!-- ここから挿入したいソースコードなどスタート -->
<a class="pagetop" href="#"><div class="pagetop__arrow"></div></a>
<!-- ここまで -->
<?php
});
function add_link_files() {
// CSSの読み込み
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'add_link_files' );
テーマCSS
管理画面の「管理画面>ツール>テーマファイルエディター」を選択して、「Stylesheet」を選択して編集する。
style.css
/* heade画像の角丸をなくす */
.wp-post-image{
border-radius: 0px;
}
/* ページトップに戻る*/
html {
scroll-behavior: smooth;
}
.pagetop {
height: 50px;
width: 50px;
position: fixed;
right: 30px;
bottom: 30px;
background: #fff;
border: solid 2px #000;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.pagetop__arrow {
height: 10px;
width: 10px;
border-top: 3px solid #000;
border-right: 3px solid #000;
transform: translateY(20%) rotate(-45deg);
}
.wp-site-blocks {
margin-top: -20px;
}
/* マウスオーバーで色を変える */
@media (hover: hover) and (pointer: fine) {
.pagetop:hover, .pagetop:hover .pagetop__arrow {
border-color: #3293e7;
}
}
:where(.wp-site-blocks) > :first-child {
margin-block-start: -20px;
}
/* マウスオンで画僧を暗くする */
.image-hober-shadow img:hover{
opacity:0.5;
transition:0.3s;
}
.user-select-none {
user-select: none;
}
font
<i class="fa-solid fa-house"></i>
プラグイン
使用しているプラグイン
Simple CSS
サイト全体とページごとにCSSを追加出来る。
Flexible Spacer Block
XO Slider
サイト全体とページごとにCSSを追加出来る。
Flexible Table Block
タブスタイルでコンテンツを表示するためのカスタム Gutenberg ブロック
https://ja.wordpress.org/plugins/advanced-tabs-block/
タブデザインの参考例
https://webdesigngarden.com/blog02/
WP Fastest Cache
最もシンプルで速い WP キャッシュシステム
SEO SIMPLE PACK
とてもシンプルなSEOプラグインです。ページごとのmetaタグやOGPタグを簡単に設定・カスタマイズできます。
CSSの利用方法
電話番号の取り扱い
電話番号は
- テキストコピーを防止
- PCでの電話発信を無効にする