投稿記事一覧
このサイトはどんな【WordPress】テーマを使っているのか?
気になるサイトさんのソースを見て、「これはWordPressだな」ということはわかりますが、テーマまではわかりません。
それをどうやって調べるか?
やっぱりありました、それ用のツール。
★「What WordPress Theme Is That?」
便利かも。
HTML5が廃止された件
HTML5が2021年の1月に廃止になっていたなんて、恥ずかしながら知りませんでした😅
現行は「HTML Living Standard」というものだそうです。
上記サイト様のこの記事にあるように、HTMLの歴史が関係しているようだけど、それはともかくとして、気になるのは「どのように変わるのか」ということ。
それをこちらのサイト様より抜粋させていただきます。
HTML5 と HTML Living Standardの違い ・<a href=""> をクリックしたときに、hrefのページに遷移しつつ、別URLにpingを送信するping属性の追加 ・<img> の遅延読み込みを行う loading の追加 ・autofocus が <button>や<input>以外の、全てのフォーカス可能な要素にも適用可能に ・<h1>は複数使用可能(ただし <section>も併用すること)
この中で、最後の「<h1>は複数使用可能」というのが私的には最も「おお〜」と思えました。
WordPressの投稿タイトルを<h1>にすることもOKな感じですね。
あと、テーマチェックでDEBUGを行った時に、
add_theme_support('html5');
がエラーになりました😱
なので削除してDEBUGを再度行ったのですが、これからは’html Living Standard’になるのだろうか。(長い💦)
まだCodexにも書いてなかったなぁ。
一度試してみればよかったかな?
ご存知の方がいらっしゃればご教授くださいませ🙇♀️
PHPファイルでショートコードを使いたい
PHPファイルでショートコードを使いたいとき、バッチリのコードがあります。
=xx.php= <?php echo do_shortcode('[使いたいショートコード]'); ?>
めっちゃ便利です👍
【WordPress】カスタムロゴの設置
ロゴを設定するには、
=functions.php= add_theme_support( 'custom-logo' );
と記述し、ロゴを設置したい場所に
(例)=header.php= <header> <div class="header_head"> <h1><?php the_custom_logo(); ?> <?php bloginfo('name'); ?></h1> …
とするだけ。
これだけで
<a href=”トップページurl” class=”custom-logo-link” rel=”home”>
<img width=”○○” height=”○○” src=”画像URL” class=”custom-logo” alt=”○○○(メディアの「代替テキストで指定)” />
</a>
と書き出してくれます。
ロゴの大きさなどcssで指定するには、
=style.cssなど= .custom-logo { width: 20px; height: 20px; vertical-align: text-bottom; }
でOK。
お洒落な「Button」の装飾
YouTubeで、すっごくお洒落な装飾Buttonのcssを発見しました❗️
hoverすると、「ビョョーン」って横に伸びて、ネオンのように光ります💡
すごい! やってみたい!
cssも簡単です。
=index.html= <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Transform Botton</title> <link rel="stylesheet" type="text/css" href="btn-style.css"> </head> <body> <a href="#" style="--clr:#1e9bff"><span>Button</span><i></i></a> </body> </html>
=style.css= * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #27282c; } a { position: relative; background: #444; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 1.5em; letter-spacing: 0.1em; padding: 10px 30px; transition: 0.5s; } a:hover { letter-spacing: 0.25em; background: var(--clr); color: var(--clr); box-shadow: 0 0 35px var(--clr); } a::before { content: ''; position: absolute; inset: 2px; background: #27282c; } a span { position: relative; z-index: 1; } a i { position: absolute; inset: 0; display: block; } a i::before { content: ''; position: absolute; top: -3.5px; left: 80%; width: 10px; height: 5px; border: 2px solid var(--clr); background: #27282c; transition: 0.5s; transform: translateX(-50%); } a i::after { content: ''; position: absolute; bottom: -3.5px; left: 20%; width: 10px; height: 5px; border: 2px solid var(--clr); background: #27282c; transition: 0.5s; transform: translateX(-50%); } a:hover i::before { width: 20px; left: 20%; } a:hover i::after { width: 20px; left: 80%; }