WordPress
【WordPress】固定ページのテンプレートを作る
固定ページに新たなテンプレートを作る方法は容易い。(はず😅)
新しくphpファイルを作って、その一番上に
<?php /* Template Name : 新しいテンプレート名 */ ?>
これだけで良い。(はず😢)
でも、私の場合、新たなテンプレートがドロップダウン表示されなかった。
なぜ? (ここから私のWhy? は始まった)
テーマファイルにもちゃんと新たなphpファイルはアップされている。
なんなら、
Template Post Type: post
とも追加してみた。でもダメ。
プラグインが邪魔をしているかと思って、色々停止してみた。
いったん他のテーマに切り替えてから再度テーマを戻したり、キャッシュクリアを試みた。
でも全て徒労に終わった。Why?
そしてついに、次のサイト様から解決の糸口を見つけた❗️
★WordPressでテンプレートを作成して固定ページに適用する
つまり、「page-***.php」というファイルを作れば、「Template Name」の設定は必要ないということ。
ちなみに、「***」の部分には、スラッグ名またはIDを入れればOK。
そうかぁ、Template Nameの設定は要らないのかぁ。
眼から鱗とは、このこと。
結局、「できるはず」のやり方がなぜ効かなかったのか原因は突き止められなかったが、まあこれからはこの方法でいきましょう。
【WordPress】jQueryが動かない時の一番簡単な対処方法
(これ、書いておいたと思っていたけど書いていなかったみたいなので、備忘録として残しておきます)
WordPressのjQueryはすでに独自で備わっているので、コードを書くときに「$」を使ってはならぬという決まりがある。
で、「$ → jQuery」に全て書き換えると良いのだが、それは面倒だし漏れることもあるのでやめておく。
結論。以下で。
「jQuery(function($){ });」でコードを囲む。
<script>
jQuery(function($){
$(‘#test’).text();
$(‘.test’).remove(‘.sample’);
});
</script>
【WordPress】css.mapは削除…だよね?
基本、「極力無駄なファイルはサーバーにアップロードしない」ということで、sassを使ったときに自動で生成されるcss.mapファイルもアップロードしてはいけないと習った記憶が。
元々sassファイルも変更すればいちいち全部アップロードしていたのですが、最近はcssだけをアップロードするようにしました。
で、それだったらsass関係のファイルは全消去でいいんだと思い、実際サーバーから削除したのですが、検証ツールに「css.mapが見つかりません」というエラーメッセージが出る。
不要なんでしょう? どうして見つけようとするの?😢
別に影響はないからほっといてもいいんだけど、やっばり気になるよねぇ。
このエラーを消すにはどうしたらいいか…。
答えは簡単。「そっか❗️」って感じ。
cssファイルのイッチバン下、「/*# sourceMappingURL=style.css.map */」を消すだけなのサ。
「電話番号をタップ→発信」の簡単コード
電話番号や電話アイコンをタップするだけで、そのままスマホから発信できるようにする。
出先ではすごく便利な機能です。
この機能は、これからは必須ですね。
コードはめちゃ簡単です。
<a href="tel:00012345678">000-1234-5678</a>
WordPressの投稿でリンクを貼る場合は、もちろん、tel:00012345678 だけでOK。
それで、一応パソコンからはこの挙動を禁止する方が良いらしいので、そのコードも書いておきます。
=functions.php=
function my_wp_head_tel_link(){
if(!wp_is_mobile()): ?>
<style type="text/css">
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
</style>
<?php endif;
}
add_action('wp_head', 'my_wp_head_tel_link');
これはWordPress限定のコードです。
他にも、jQueryを使ったりする方法があるようですが、とりあえずこれで様子を見たいと思います。
【WordPress】アクティブメニューの色を変える
現在閲覧しているページのメニューに色をつける方法。
静的サイトの場合は、JavaScriptを使うのが一般的だけど、WordPressの場合は?
それがまあ、とっても簡単なことだった。
WordPressでは、アクティブページに自動的に ”current_page_item” というclassが付くんだって。
なので、静的サイトのcssで “.active” としていたところを ”.current_page_item” に置換すればOKです。
ちなみに、JavaScriptのコードは、以下になります。
=script.js=
$(function(){
$('a').each(function(){
var $href = $(this).attr('href');
if(location.href.match($href)) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
または、
document.addEventListener('DOMContentLoaded', function() {
var filename = location.href.match(".+/(.+?)\.[a-z]+([\?#;].*)?$")[1];
$('a[href*="' + filename + '"]').addClass('active');
});
