slick.jsがタブ切り替えやモーダルで不具合

,
Pocket

Pocket

マウスオーバーした画像をメインの画像と差し替えて大きく表示

, ,
Pocket

画像がたくさん並んでいると、クリックして拡大するのは面倒だし、ぱっと大きい画像を表示したいことってよくありますよね。

色々な方法があるのですが、シンプルな方法がみつかりましたので、備忘録です。

jqueryを使うので読み込み忘れないようにしてください。

準備(HTMLとCSS)

メイン画像とサムネイル画像を表示します。

#mainImage の中に画像をメイン画像を設定します。

サムネイル画像は #imageList の中です。

HTML

 
<div id="mainImage">
<img src="sample1.jpg" />
</div>

<div id="imageList">
<ul>
<li><img src="sample1.jpg"></li>
<li><img src="sample2.jpg"></li>
<li><img src="sample3.jpg"></li>
<li><img src="sample4.jpg"></li>
<li><img src="sample5.jpg"></li>

</ul>

</div>

CSS

画像を差し替えるって所がポイントなので、メインの画像と同じサイズの画像をサムネイル画像にセットします。

どんなサイズでもいいんですが、


#imageList img { width:サムネイルの大きさ; height: サムネイルの大きさ; object-fit: cover;}

なんて感じで設定すると、比率が変わらず小さくなるので、便利かと思います。

javascript


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 
    // 「imageList」内の「img」をマウスオーバーした場合
    $('#imageList img').hover(function(){
 
        // マウスオーバーしている画像をメインの画像に反映
        $('#mainImage img').attr('src', $(this).attr('src'));
 
    });
 
});
</script>

これで、サムネイル画像をマウスオーバーするとメイン画像が切り替わります。

Pocket

管理者権限ユーザーをphpmayadminから追加

Pocket

Pocket

wordpressのPOTファイルが更新された場合

Pocket

テーマのアップデートなどで、既に言語ファイルがあるが、元のPOTファイルが更新された場合の対応方法です。

  1. Poeditを起動して、メニュー[ファイル]-[開く]を選択。
  2. 翻訳済みのPOファイル(旧バージョン)を選択して「開く」を押す。
  3. [カタログ]-[POTファイルを元に更新します]を選択。
  4. 新しくなったPOTファイルを選択して「OK」を押下。

以上で完了。

簡単でよかった。

Pocket

Contact Form7 404エラー

,
Pocket

いままで諸問題でCGIのフォーム+wordpressで運用していたサイトを、余計な管理が増えないように、

WordPressだけで完結するよう、CGIのフォームをContact Form7に移行することにしました。

なぜかContact Form7が404エラー

既存のフォームをContact Form7にし、送信すると404エラーとなってしまいました。

試しにデフォルトの状態のフォームを作り、テストページに設置すると、きちんと動きます。

?なんだろう??

原因と解決方法

解決方法は単純で、入力項目に[name]を使っていたことでした。

nameはwordpressのクエリーに使用されているので使ってはいけないとのことです。

皆様気を付けましょう

オフィシャルのFAQ

Pocket

wordpress php 動かない

Pocket

お客様からのご依頼で、heteml(ヘテムル)からさくらインターネットにwordpressの移行を行っていたのですが、

なぜか、移行したwordpressが動かない・・・

ソースが表示されてしまう。

試しにクイックインストールや、手動でもほかのディレクトリにインストールすると動く・・

試しにwordpressがあるディレクトリにアップしてみたphpinfo();も動かない・・?

なんだなんだ~?って慌ててたら単純なことでした・・

wordpressがあるディレクトリ内の.htaccessに、

AddHandler php5.4-script .php

の記載があり、これを削除(コメントアウトでも可)してあげればよかっただけでした。

無駄に慌てて損したので、皆様同じようにハマらないように記載しておきます。

 

Pocket

Multi Plugin Installer – 複数のプラグインを一括してインストールできるwordpressプラグイン

,
Pocket

Multi Plugin Installerは、複数のWordpressプラグインを一括してインストールできるプラグインです。

新規サイトを立ち上げたときなど、いつも同じようなプラグインをインストールするので、こちらのプラグインを利用するとウェブサイトの構築がだいぶ捗ります。

しかも、このプラグインは設定データをインポート&エクスポートできるし、テキストでプラグイン名を入れるだけでもインストールできるの非常に便利なプラグインです。

活用して時短を図りましょう!

はじめに

このプラグインの良いところ

  1. 複数のWordPressプラグインを同時に一括してインストールできる。
  2. プラグインの一括インストール方法は4パターンある。
    プラグインの名前、ZIPファイルのURL、自分のPC上のデータ、設定データを登録してインストールします。
  3. 設定ファイルをインポート&エクスポートできる。
  4. プラグインのデータのバックアップ機能がある。

インストール方法

管理画面から検索してインストールして下さい。または、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

  1. WordPress管理画面 > プラグイン > 新規追加 >「Multi Plugin Installer」で検索する。
  2. WordPress.org からダウンロード

プラグインの使い方

管理画面から一括してプラグインをインストールできます。

管理画面

プラグインの管理画面はダッシュボード左のメニューバーにあります。

WordPress管理画面 > Multi Plugin Installer

プラグイン一括インストール画面

Multi Plugin Installerの、プラグイン一括インストール方法は4パターンあります。ほとんどの場合、プラグインの名前でインストールされるかと思います。

下記画像の通り、一番大きいスペースに、インストールしたいプラグインのリストを入力し、「Install&Activate Plugins」をクリックすると、インストールして有効化してくれます。

20150527-02

 

インストールの進行状況と結果

通常のプラグインのインストールとほぼ同じ画面が表示されます。既にインストールされているプラグインがある場合はエラーになり、重複してインストールされることはありません。

また、キチンと調べた訳ではありませんが、Wordpressの公式Plugin Directoryにないプラグインは、名前ではインストールできないようです。

まとめ

Multi Plugin Installerは、複数のWordpressプラグインを一括してインストールできる非常に便利なプラグインです。

新規サイトを立ち上げたときなど、いつも同じようなプラグインをインストールするので、こちらのプラグインを利用するとウェブサイトの構築がだいぶ捗ります。

ただ、一回利用したら、継続して使うことはないかと思いますので、利用後は停止、できれば削除しておきましょう!

最後までお読み頂き、ありがとうございます。

もし役に立ったなーと思われたら、ソーシャルメディアでこの記事を共有してください!

Pocket

WordPressの「Contact Form 7」プラグインの特別なメールタグ

,
Pocket

wordpressでのウェブサイト構築時にほぼ100%と言っていいくらい、フォームには「Contact Form7」というプラグインを利用させていただいてます。

今回、ページごとに問い合わせフォームを設置し、件名を「【ページタイトル】についてのお問い合わせ」という形で送信したくて、調べてみました。

特別なメールタグ

公式サイトのTipsの項目に用意されていました。

コチラはメールタグなので、メールでのみ表示されます。

タグ 説明
[_remote_ip] このタグは送信者の IP アドレスで置換されます。
[_user_agent] このタグは送信者のユーザーエージェント情報で置換されます。
[_url] このタグはコンタクトフォームの URL で置換されます。
[_date] このタグは送信された日付で置換されます。
[_time] このタグは送信された時刻で置換されます。
[_post_id] このタグはコンタクトフォームを含んだ投稿の ID で置換されます。
[_post_name] このタグはコンタクトフォームを含んだ投稿の名前(スラッグ)で置換されます。
[_post_title] このタグはコンタクトフォームを含んだ投稿のタイトルで置換されます。
[_post_url] このタグはコンタクトフォームを含んだ投稿のパーマリンクで置換されます。
[_post_author] このタグはコンタクトフォームを含んだ投稿の作成者の名前で置換されます。
[_post_author_email] このタグはコンタクトフォームを含んだ投稿の作成者のメールアドレスで置換されます。

上記のタグをメール本文に貼り付けます。

20150312-02

メールが送信されると、メール本文に情報が表示されます。

特別メールタグの利用時の注意点と問題

特別なメールタグは、Contact Form 7 が「投稿」または「ページ」の本文で設置される場合でのみ有効で、ウィジェットの中に設置された Contact Form 7 のフォームでは利用できない、という点で注意が必要です。また、カスタム投稿タイプでも利用できませんでした。

実は、今回のこのサイトの事例ページで利用したかったのですが、まだ実装できてません。時間が取れたときに再チャレンジしようと思います。

Pocket

ショップサーブのwordpress home url 編

,
Pocket

自社で運営している「香水専門店コスメ百貨」はEストアーショップサーブという通販システムを利用しています。

コンテンツを拡充させるためにwordpressオプションサービスを利用することにしました。

管理画面の通知をもらい、ログインしいつも利用しているテーマをインストールしてパーマリンク設定をすると、ホームへのリンクが「http://cosmehyakka.com/info/vol1/HTTP/c/cosmehyakka.com/docs/info」となってしまう。

次の事を試してみました。

  1. 設定>一般設定 より、サイトアドレスの変更
    変更が反映されず、改善せず。
  2. .htaccessの設定
    パーマリンクを設定変更するとwordpress内に.htaccessを生成されるはずだが、生成されず、FTPでアップしても消えてしまう。
  3. サポートに電話
    サポートに電話したが、wordpressには詳しくないし、サービスの内容はwordpressをインストールして利用できるようにするだけだから、と一蹴。
    (だったら自由に設置できるようにさせてくれればいいのにと思うが・・)

諸々調べてみると、ショップデータがあるディレクトリに新たに「info」というディレクトリがあり、その中に.htaccessを置いていてリダイレクトするようになっていました。

.htaccessの設定を追加・編集すれば現在のままでも解決できたと思いますが、デフォルトテーマに切り替えてみたところ、問題なく表示されたので、その差を調べると、トップページへのリンクが利用しているテーマが「home_url();」となっておりデフォルトのテーマは「home_url(‘/’);」とパスを追加してありました。

利用するテーマも「home_url(‘/’);」に変更したところ、無事解決。

今回のまとめ

たしか「/」は省略可能だと思ったけど、とりあえずショップサーブでのwordpress運用では、home_url(‘/’);と記載すること。

 

 

 

 

Pocket

moファイルからpoファイルを作る

Pocket

通常はpoファイルから「Poedit」を使ってwordpressの翻訳をしているのだけれど、今回moファイルからpoファイルをつくりたかったので、調べてみました。

簡単にコンバートできるサービスがあったので備忘録として記載しておきます。

Online Tools for WordPress Developers

ほかにも、png やjpegを最適化してくれるようです。

 

 

Pocket

wordpressの投稿記事一覧をCSV(エクセル)にする / Export to Text

,
Pocket

いままで、通常のHTMLサイト+ブログサービスの形で運用していたサイトを「wordpress」のみで運用することになりました。

ブログサービスから記事をエクスポートしてインポートしましたが、レイアウトがずれてしまい、修正することに。

作業チェックの為、記事を一覧化しようとおもいましたが、記事数が120件あるので、手作業は即断念。

固定ページに一覧を出力してコピーしようかと思ったけど、それも手間だなーと思いとりあえず検索。

すぐに見つかりました。

Export to Text

投稿に限らず、固定ページなども出力できるようです。

使い方

ツール > Export to Text で設定画面に進みます。

20150216-02

設定画面では、投稿者や投稿のタイプ、状況やカテゴリー等出力する投稿を細かく選択できるようになっています。

とりあえず今回は投稿すべてを出力しました。

設定画面上部の「Download as TXT file」をクリックするとテキストファイルがダウンロードできます。

ダウンロードが完了したら、エクセルを立ち上げて、ファイル>開く で ファイルの種類をすべてのファイルまたはテキストファイルにします。

開こうとすると下記のような警告画面がでましたが、そのまま続行。

2015-02-16_04

2015-02-16_03

テキストファイルウィザードになりますが、初期の文字コードが、windows(ANSI)になっているので、utf-8に変更。

2015-02-16_05

2015-02-16_06

 

日本語もきちんと表示されます。

2015-02-16_07

タブ区切りで読み込んで完了!

パーマリンクなども出力できるのでページの管理用としては完璧です。

wordpressは何かをやりたいとおもったら、ほぼプラグインがあるので便利~。

また便利なのがあったらご紹介します。

Pocket

wordpress4.1 ビジュアルエディター 消える

Pocket

更新などをした覚えがないのだけど、急にwordpress 4.1 でビジュアルエディターが使えなくなった。

とりあえずエディタまわりに関係するプラグインをひとつづつ停止してみると、

Browser Shots

※リンク先のサイトのスクリーンショットを自動で表示できるプラグイン

というプラグインが原因と判明。

ただ、きちんとプラグインも4.1に対応しているので、他の管理サイトも調べてみたら普通に使えているので、テーマと干渉してしまったようです。

詳しくは調べていないので、とりあえずメモとして・・・

2015-01-15-2

 

※追記

WP4.1 にてプラグインが1.0だと正常に動いていて、1.2に更新すると上記現象が起きるようです。記事書いた後にこのブログで現象がでました。

※追記の追記

プラグインのバージョンアップをしたら現象が解決しました。解消したバージョンは1.3.2です。(←その前にも解決してるかもしれません)

 

Pocket