Archives 2018.11.03

Tweets for 2018-11-02

  • RT @AkeyamaFox: ふたりはスカキュア https://t.co/EXoF5kvBJg ->
  • キズナアイはただのデジタルデータでしかない…ふむ、人間の精神がただの電気と化学反応の連鎖でしかないこと、知ってました? ->
  • 今日も一日コーディングがんばろう! #バーチャルコミッター
    #カスタムキャスト https://t.co/g0CLs9QU9b ->
  • RT @abochiabc: 水彩ミニ原画 中 縦 (9×7)
    立て掛けタイプの額付き
    ③励ましてくれるキュアアンジュ https://t.co/HXnn0qkOQf ->
  • RT @Beriya: ハロウィンで騒いで懲戒解雇、法的にどうなんだという感じしかしないし裁判になってほしい。 ->
  • RT @black_kaiji: あ゙っ・・・!?
    Perl…?
    このエンジニア…
    面接での「使える言語は?」の質問に…
    答えてきおった…
    Perlと…!!
    使わん…!Perlなど絶対に……!
    ほら見ろ…CTOの顔もひきつっている…
    いやさすがに
    使えるはず…他の言語… ->
  • RT @biri_EX: アーチャーとセイバーの漫画 https://t.co/5I8wC5BamV ->
  • 刃物産地に納税すると仕込み小刀が返礼でもらえるとか… https://t.co/bhhSaZ1Q4X ->
  • RT @tikal: 人間社会の模式図を次に示す: https://t.co/mf7JkRcV64 ->
  • メキシコ郊外の新興住宅地を空撮すると、まるで「シムシティ」のような光景が広がっていた @wired_jp https://t.co/G9MnPpybPm ->
  • ◎貴サークルは、日曜日 中学校の中に配置されました。
    https://t.co/X91wtJF3iZ
    選挙かな? ->
  • RT @Alice164147: 平成最後の最高の日🧦
    #タイツの日 https://t.co/Idtg6h37VH ->
  • 自分はオタク活動もしているが、既に40歳からの介護保険料が払えない見込みで不安しかねえ。今37歳なので、もう3年後からだ。 ->
  • RT @hatebu: ワークマンのカジュアル店が「ユニクロ」「ZOZO」よりすごいワケ(竹内 謙礼) | マネー現代 | 講談社(1/4) https://t.co/nBrHcFPeAW https://t.co/gyM0QDm8m8 ->
  • 眠い…今日は昼からまた手術跡が疼く。3年経ってるのになあ。 ->
  • RT @hornet18c: エスコン7開発陣ヤバすぎやろ
    ウクライナカラーのSu-37って
    ヤバすぎやろ 信じられんかっこいい https://t.co/MsMRbNcpZa ->
  • 最近は漢字だけのサークル名は少なそう(自分の時も少なかった) ->
  • うかうかと買ってしまった https://t.co/5bbHNkiRLt ->
  • マスターにプッシュするな!ブランチ切れよ! #バーチャルコミッター #カスタムキャスト https://t.co/FXDvOg3gsm ->
  • Windows非対応だとぉー?! #バーチャルコミッター
    #カスタムキャスト https://t.co/8UQlVXf60h ->
  • やはりそれっぽい台詞だけではコミッターとしての説得力がなさ過ぎる。コードキャストをしないと。 ->
  • RT @ichihi_: ハロウィンのジャンヌオルタ漫画 https://t.co/otfG3GxqMT ->
  • 名前が決まらん
    #カスタムキャスト https://t.co/bb8WSsovk1 ->
  • RT @Gerbera_hybrid: うぅ…病井さん…ごめんね…すき…(えっちな絵を描いてしまった) https://t.co/GwopdE7luR ->
  • この二人を作ってるのです。 #カスタムキャスト https://t.co/wF2O9OSJHg ->
  • RT @s01: はてなブログに投稿しました #はてなブログ
    W3C TPAC 2018に行ってきた(非技術記事) – そんなことはさておいて
    https://t.co/ChC4FB4haT ->
  • RT @kilye_4421: デジタルデッサン https://t.co/lE6V2EJp5Q ->
  • RT @TokikoKato: さくらんぼの実る頃、を録音した時、初対面の宮崎さんとのショットです。
    宮崎さんの童顔が可愛いでしょ?若かったね。 https://t.co/DoQFuVIQEm ->
  • RT @yamagishi: ロサンゼルスで撮影した紅の豚にも出てくる水上機。 https://t.co/QESDV3ySrL ->
  • 日独エストニアの三ヶ国共同製作で「泥まみれの虎」を劇場アニメ化して欲しい。 ->
  • フィオも天才なんだよなあ… ->
  • RT @toutou_net: 紅豚のフィヨ見て設計者を目指したのを思い出す夜(˘ω˘) ->

テーマフォルダの画像を表示するときに便利な関数

常用していた画像の呼び出し方法だと、srcsetプロパティを使った時にちょっと読みにくくなるので、get_theme_file_uri() 関数を使って書き換えてみました。

WordPressのテーマ作成で、テーマテンプレート内の画像を表示する方法としてget_stylesheet_uri関数を使用してきました。こういう感じですね。

<img class="site-banner"
   src="<?php echo get_stylesheet_directory_uri(); ?>/img/site-banner.png"
   alt="<?php bloginfo( 'name' ); ?>"
>

get_stylesheet_directory_uri()と書いてから、ディレクトリを続けて書いてファイル名。これで当サイトならimgのsrcプロパティは下記のように出力されます。

https://autumnsky.jp/wp-contents/themes/shirohanada/img/site-banner.png

ですが、レスポンシブ対応で複数の画像を指定する際は、この方法だと少し読みにくいように感じます。
最近だと画像やアイコンをassetsフォルダの中に、さらに分類していたりするのでパス指定も長くなりがちです。
参考: レスポンシブ画像の作り方 – 解像度の切り替え: 同じサイズ、異なる解像度  Mozzila

<img class="site-banner"
src="<?php echo get_stylesheet_directory_uri(); ?>/assets/img/site-banner.png"
srcset="<?php echo get_stylesheet_directory_uri(); ?>/assets/img/site-banner.png x1,
<?php echo get_stylesheet_directory_uri(); ?>/assets/img/site-banner@x2.png x2"
alt="<?php bloginfo( 'name' ); ?>" >

このように、すこし読みにくいように思います。

そこで、WordPress4.7以降で追加された get_theme_file_uri関数を使います。

<?php echo get_theme_file_uri( "/img/site-banner.png" ); ?>

get_theme_file_uri関数は<?php  ?>の後ろに書いていたファイルパスを引数として()内に指定できます。
上記のコードは、get_stylesheet_directory_uri関数を使った時と同じように下記の通り出力されます。

https://autumnsky.jp/wp-contents/themes/shirohanada/img/site-banner.png

srcsetプロパティを指定する際に
get_theme_file_uri関数を使うと、このように書き換えられます。

<img class="site-banner"
   src="<?php echo get_theme_file_uri( "/assets/img/site-banner.png" ); ?>"
   srcset="<?php echo get_theme_file_uri( "/assets/img/site-banner.png" ); ?> x1,
   <?php echo get_theme_file_uri( "/assets/img/site-banner@x2.png" ); ?> x2"
   alt="<?php bloginfo( 'name' ); ?>"
>

get_stylesheet_directory_uriを使うよりもスッキリと書けます。

参考にしたサイト