こんにちは！ WordPress大好きライターのナナミです。 WordPressでサイトを作っていると、どうしてもHTMLやCSSでは作れない動きや機能を追加したくなる時ってありませんか？ そんな時はJavaScriptの出番なのですが……
WordPressでJavaScriptを使う方法と動かない時の解決法 | 侍エンジニアブログ
こんにちは！ WordPress大好きライターのナナミです。 WordPressでサイトを作っていると、どうしてもHTMLやCSSでは作れない動きや機能を追加したくなる時ってありませんか？ そんな時はJavaScriptの出番なのですが……
独自のCSSやJSを読み込む
WordPressで、プラグインではなく自作したりダウンロードしてきたCSSやJS(プラグイン)を読み込んだりするケースがあると思います。今回は、その際のCSSやJSファイルの使用方法をまとめてみました。 CSSファイルを読み込む方法 CSSを読み込むには、以下の関数を使用します。 wp_enqueue_style ★例として、子テーマフォルダ下に配置したBootstrapのCSSファイルを読み込ませる functions.php(子テーマ)に追加して下さい。 // wp-config/theme/[子テーマ名]/functions.php function my_styles() { wp_enqueue_style( 'bootstrap', get_bloginfo( 'stylesheet_directory') . '/bootstrap.min.css', array(), n
WordPress以外でも使える!スマホとタブレット・PCの振り分け方法まとめ
通常サイトのスマホやタブレットの振り分け方法 まずはWordPress以外のWebサイト制作でも使える、スマホやタブレットの判別方法についてです。今年はWebサービスを作りたいとも思っているので、その時のスマホ振り分けにも使えそうです。 PHPの関数で振り分ける方法 Googleで検索すると、山のように見つかる、PHPによるスマホとPC・タブレットの判別方法です。もっともシンプルな書き方を紹介しますので、スマホやタブレットの機種などは好みで追加変更してください。 [php] function userAgent() { $ua = $_SERVER[‘HTTP_USER_AGENT’]; if(preg_match(‘#\b(iP(hone|od);|Android.*Mobile )|Windows.*Phone|blackberry.*|PSP|3DS|Vita#’,$ua)){ $u
自作のJavaScriptをWordPressで利用する方法
現在WordPress高速化のためにあれこれ勉強しているのですが、自作のJavaScriptをWordPressで追加して使う方法が調べても結構難しくて理解しにくかったので私なりにまとめてみようと思います。 注意点も幾つかありますのでその都度説明してみたいと思います。 前回「ページの先頭に戻るボタン」を自作しました。 ⇒ページの先頭に戻るボタンを自作してみた 今回はその続きです。 まずは自作したJavaScriptをアップロード 自作したJavaScriptをアップロードする場所としては幾つか候補があるようですが、私の場合は作成した「子テーマ」に入れる事にしました。ロリポップで説明しておくと「ロリポップのユーザー専用ページ」⇒「webツール」⇒「自分のドメイン」⇒「wp-content」⇒「themes」⇒「child（子テーマ）」に「js」という「フォルダ」を作成しました。ファイルではな
WordPressで使える、jQueryで「トップへ戻る」ボタンの作り方
最近、後学のためにWordpressのテーマを作ってます。 ちょうど「トップへ戻る」ボタンをつけたいと思っていた時に、仕組みを非常にわかりやすく解説してある良い記事を見つけました。 初心者でも分かる！なjQuery「TOPへ戻るボタン」の作り方 – Syncer ちなみに、「トップへ戻る」ボタンというのは、ページを下にスクロールすると右下にスーっと出てきて、クリックするとページの一番上にスクロール移動するやつです。 で、上で書かれている方法をWordpressでもやってみたのですが、正常に動きません。 どうやら、jQueryを書くときWordpressでは特有の書き方をしなければいけないようです。 ということで、上で紹介してある「トップへ戻る」ボタンをWordpressテーマでも使えるようにしたものを載せておきたいと思います。（※多少コードを修正してある箇所もあります） photo by
AmazonJS (WordPress Plugin)
概要 AmazonJSはjavascriptでAmazonの商品を表示するWordPressプラグインです。 http://wordpress.org/extend/plugins/amazonjs/ WordPress 2.8以上、PHP5以上で動作します 商品データのキャッシュでTransients APIを使用します(バージョン0.8から) ブログの編集画面からAmazon商品を検索して、投稿へ追加できます 投稿へ追加する時にjavascriptを使って動的に表示するのか、javascriptを使わずにWP-Amazon互換の簡単なリンクを表示するか選択できます jQuery templateを使った表示の拡張ができます(javascriptおよびjQuery templateの知識が必要です) RSSフィードでやjavascriptがオフの場合はサーバー側でシンプルなリンクを追加し
WordPress で新サイトを開設する時に必ず入れるプラグイン14選 | キャリコ
WordPress は4つ運営中、キャリコ（ @calicocatxyz ）です。 やりたいことを叶えるために WordPress を覚えるところから始まり、初めて開設したキャリコ、MT から引っ越しさせた旅ブログ、仕事で扱うブログ、スコにゃん劇場と、気付けば4つのサイトを抱えるまでになっていました。 そうなると WordPress の扱いには慣れたもので、使うプラグインも大体決まってくるのです。基本的なプラグインを決めておいて、あとはそのサイトの特色に合わせて選ぶといった感じですね。それではいってみましょう。 WordPress プラグイン Autoptimize ダウンロードAutoptimize Web サイトのページ表示速度がエライ上がると評判の Autoptimize はインストールするだけで段違いに速くなります。特に JavaScript の縮小によりスマホ・パソコン表示のスコ
個別のHTML, CSS, JS, PHPを追加・管理できるプラグイン -CSS & JavaScript Toolbox | コリス
WordPressで特定のページだけ個別のスタイルシートやスクリプトを使いたい！ しかも1ページだけでも複数のページにも適用する場合がある！ そんな要望を叶えてくれます。 投稿記事、固定ページ、カテゴリページ、カスタム投稿記事に、個別のHTML, CSS, JavaScript, PHPのコードを追加でき、一元管理もできるプラグインを紹介します。 CSS & JavaScript Toolbox CSS & JavaScript Toolbox -WP Plugin Directory 以前、紹介したCustom CSS and JSは記事や固定ページごとにそれぞれ個別のCSS, JavaScriptの外部ファイルやコードを追加できるプラグインで、これは手軽に利用できて便利ですが、今回紹介するのはそれより高機能。 まずは、その画面をご紹介。 当ブログにインストールした画面です。 左パネルで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsive WordPress Slider Plugin