Foter.com皆さまごきげんよう。本日は前回作ったjavascriptのカウントダウンタイマーをワードプレスに実装してみます。javascriptでカウントダウンタイマーを作るワードプレスに実装してみる前回作ったscriptの部分を、新たにjsファイル(○◯.js)にしてFTPサーバの任意の場所に保存します。24;//hを24で割った余り。ここでは使っていないが、残り○時間を取得したい時に。countdowntimer();//関数を呼び出すその時に、ワードプレスでjQueryを使う場合のお約束として$をjQueryと書き換えることをお忘れなく!これが原因で動かないー!っていうことがよくあります(笑)外部ファイルを読み込む先ほどFTPに上げたjsファイルを読み込ませる記述をheader.phpの中に書きます。?>の上に書き加えます。?>jsファイル名、(子テーマを使っているなら)get_stylesheet_directory_uri()、jsファイルのパス、はご自分の指定に変えて下さいね。外部ファイル、get_stylesheet_directory_uri()についてはこちらの記事もご覧ください。ワードプレスの背景に雪を降らせてみよう表示させる場所を作る表示したい場所をディベロッパツールなどで調べます。私の場合はメニューバーだったので、その辺りの要素を調査してみるとメニューリストの後</nav>の後ろに入れると良さそうだ、と見当がついたのでメニューバーの記述があるheader.phpの中の</nav>のwrapが閉じる直前に新しく<div>を作り、IDをcountdownと名付けました。実際はこんな感じです。-->例えばフッターに出力したければ、書き加えるファイルはfooter.phpだろうな、と見当がつきます。フッター部分をディベロッパツールで調べたら、footer.phpの中の表示したい箇所に新しく<div>を作り、IDを付けてスタイルシートにcssで位置や見た目を整えれば良いのです。これは一例で、使っているテーマによってphpファイルの名前も違いますから、どのphpファイルに書き加えるかは調べて見つけて下さいね。cssで整えるこのままでは変な位置に表示されてしまいますので、cssで形を整えていきます。今回はこれだけでちょうど良い位置に収まりました。-1em;}いかがだったでしょうか?意外と簡単に好きなところに出力出来ますね♪これからも少しずつこのブログで実験しつつ、jsの小ネタを増やしていこうと思います。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。%d人のブロガーが「いいね」をつけました。