テーマのカスタマイズ(カスタムヘッダーとか)のプレビューが表示されない事件他

ちょっとハマった案件があったのでMEMO。

Q 1: WPのドメイン・サーバー移転を行ったんだけど、カスタムヘッダーとかの設定が消えてしまっているみたい・・・

A1:WPのデータベース移行時に、ただドメイン変えただけだとダメなことがあるよ。

参考サイト:http://webcre-archive.com/2012/10/04/wordpress-db-url-replace/

↑こちらを参考にすると良さげです。

補足:

WPの移行の流れは、

1:(古サーバ)FTPファイル一式ダウンロード

2:wp-config.phpを新しいDB情報に更新

3:(新サーバ)FTPファイル一式アップロード

4:(古サーバ)DBエクスポート

5:sqlファイル (古)aaa.com⇒(新)bbb.comへ置換 【★】

6:(新サーバ)DBインポート

以上。

★の部分で適当に置換できるエディタとかでエイってやっても上手くいくんだけど、ダメなプラグインとかテーマもあるのです。シリアライズされたデータがどーのこーので。

そんなときは上で紹介したページを参考にちゃんとドメインを変更。

 

Q 2: カスタムヘッダーの設定とか、反映されたけどなぜかプレビューが出ないよ

A 2: index.htmlとか残ってない?

テーマ>カスタマイズで、右側のプレビューが表示されない!
左ではちゃんと設定が反映されているんだけど・・・

謎・・・

DBは問題なさそだし、FTPも問題なさそだし、いったい何がいけないのか、超ググっても解決策出てこないしこのまま徹夜かも・・・って、リニューアル前のindex.html残ってんじゃん!!

こいつがあると、テーマのカスタマイズのプレビューは出てきません。

超どハマリして数時間ドブに捨てたけど、基本に返ることの大切さを学んだよ・・・

以上!

 

Jimdoの日付の形式を変更する方法

2015/08/11追記

仕様変わったらしく、年とか日とかでるようになっちゃったので下記のまま使うと表示が変になりますのでご注意くださいませ。

そのうち修正版を載せるかもしれない。

 ———————————–

たまたまjimdoというサービスを使ったサイトを頼まれたのでいろいろメモっていこうと思う。

ホームページ作成サービス-jimdo

できることはWPに比べたらもちろん少なくカスタマイズもそんなにできるわけではないけれど、
HTMLまったくわからんクライアントにはとても更新しやすいサービスだと思う。

その中で「ブログ」の日付の形式がどうもjsで操作しないと変更できないっぽかったのでメモ。

ブログの日付の形式を変更する

「年」を出すとか「曜日」を出すとかブログの日付表示の設定で変更できる。

問題はその表示形式。

「火 24 3月 2015」

ドイツ式?

これについてはとりあえずJSで対応する。

「設定」⇒「ヘッダー部分を編集」を開く。

2015-04-01_114050

ここにスタイルとかjsとか書けるのです。

以下をコピペ。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){
   
    $('time.datetime').each(function(){

        var daynum = Number($(this).find('span.day').html());
        
        var timeYear =$(this).find('span.yr').append('年');
        var timeMon = $(this).find('span.mon');
        var timeDay = $(this).find('span.day').html(daynum).append('日');
        var timeWeek= $(this).find('span.day-word').prepend('(').append(')');
        
        $(this).prepend(timeYear,timeMon,timeDay,timeWeek)

    })

})

</script>

これで「火 24 3月 2015」⇒「2015年 3月 24日 (火)」となります。

補足説明

1行目では他でもいろいろ使えるのでお好きなバージョンのjQueryを読み込んでおく

9行目では日付が「4月02日」となるのを防ぐために行頭の0を消しておく

11~14行目では年・月・日・曜日を良い感じの形にして代入しておく。
2015の後ろに「年」をつけたり曜日はかっこで囲んだりとか。

16行目で全部まとめて表示する。

以上です。

 

カスタムフィールドでビジュアルエディタとテキストエディタを使う

 

カスタムフィールドを使うのに超便利な「Advanced Custom Fields」ですが、普通のcontent入力エリアのように「ビジュアル」と「テキスト」を切り替えるフィールドタイプはさすがにない・・・

と思ってたらアドオンいれればできちゃうじゃないですか!さすが!!

もちろんAdvanced Custom Fieldsが有効になってることが前提です。

手順1:アドオンのダウンロード

https://github.com/elliotcondon/acf-wordpress-wysiwyg-field

へアクセスしてZIPでダウンロードして展開。

手順2:フォルダ名を変更

フォルダ名を「acf-wp-wysiwyg」に変更します。

手順3:フォルダをアップロード

フォルダをまるごとプラグインの階層(wp-content⇒plugins)へアップロード。

手順4:ワードプレス管理画面へ

「プラグイン」を開くと、新しくAdvanced Custom Fields: WP WYSIWYGてのが追加されているので「有効化」。

手順5:使ってみる。

Advanced Custom Fieldsの設定画面で「Wysiwyg Editor (WordPress)」を選ぶ

2014-09-11_204739

▼でた~~

2014-09-11_204903

 

投稿画面ビジュアルエディタのフォントを変更

全角と半角が見づらいよね・・・

いつも、全角と半角を間違える。
今までの記事を確認すると、ちょくちょく英語が全角になってることがある。
jQueryの「j」だけ全角とか・・・

▼分かりにくくないですか?

2014-08-01_031604

 

 

変更方法

とっても分かりやすく説明してくださってるサイトがあるので、そちらをご覧ください。

WordPressのビジュアルエディタをカスタマイズする | webOpixel

 

▼これなら間違えない!

2014-08-01_031855

 

taxonomy.phpで記事が表示されない!

症状

カスタム投稿タイプ・カスタム分類(タクソノミー)を作り、カテゴリー一覧のようにアーカイブ表示させたいときに使うテンプレートが【taxonomy.php】です。

通常の使い方としては、「taxonomy.php」または「taxnomy-[タクソノミー名].php」とかのファイルを作成し、
以下のような基本的なループを書くと一覧が表示されます。

<?php if(have_posts()): while (have_posts()):the_post(); ?>

<h1><?php the_title(); ?></h1>

<?php endwhile; else: ?>
<p>記事はありません</p>
<?php endif; ?>

 

でも出なかったんです・・・

無理やりquery_postで指定すれば出たんですが、標準の方法ででないってことは何かがおかしいってことなので調べました~

プラグインの設定間違ってた

さんざん調べて分かった答えが、プラグイン「Custom Post Type UI」の設定でした。

単純な自分のミス!ですが意外と気づかない・・・

Custom Post Type UI の設定

Custom Post Type UIはカスタム投稿タイプやカスタム分類を簡単に作成・管理できるプラグインで、お気に入りです。

カスタム投稿のオプション「Exclude From Search 」を「True」にしてしまっていたのが今回の原因でした。
False」に直したらちゃんと表示されました~。

デフォルトは「False」なので、自分でなぜか「True」にしちゃってたんですね・・・

 2014-08-01_030025

設定の確認・変更はプラグインのカスタム投稿の設定画面「Manage Post Types」を開き編集画面へ。
「Advanced Options」を開くとありますよー

 

 

googleウェブサイト翻訳ツールの設定と確認

2014-07-30_161231

↑こういうヤツ。

 

googleウェブサイト翻訳ツールへアクセス

https://translate.google.com/manager/website/?hl=ja

ログインとサイトの登録が必要です。

サイトURLとか元の言語を設定し、表示言語や表示モードを選択。

↓こんな感じで設定

2014-07-30_163716

詳細設定の「ユーザーの言語がページの言語と異なる場合に~~~」はチェックを入れておくと
日本語以外でアクセスしたときに自動で↓のような翻訳バナーがページ上部に出る。

2014-07-30_163656

日本語のときはでないので、チェックしておくとユーザーが翻訳ツールを見つける手間が省けて親切。

 

コードをコピーして自分のサイトに貼り付ける。

「コードを取得」をクリックし、出てきたコードをコピーして自分のサイトにペースト。

これだけ。表示を確認するとこんな感じ↓

2014-07-30_164426

日本語にもチェックを入れたけど、今表示されている言語と一緒だと表示されない。

英語に翻訳した後は「日本語」も出てくる。↓

2014-07-30_164757

 

現地表示の確認

これで設定は完了!

でも、そもそも「英語」とか「スペイン語」とかって日本語で表示されちゃってるけど
海外の方が読めるの?意味なくない?

とか、クライアントが不安がっていたらちゃんとユーザーの使用言語に自動で切り替わるんですよ~って説明して確認画面まで見せてあげると完璧。

訪問者のブラウザのデフォルト言語で切り分けしてるっぽいので、ブラウザのデフォルトの言語設定を変更して表示を確認。
今回はFireFoxで。

ツール⇒オプション⇒コンテンツ⇒言語設定を開き、英語とか確認したい言語を上にもってくる。

2014-07-30_170030

「OK」で閉じて、ページを更新するとこんな感じでちゃんと英語に↓

2014-07-30_170257

「言語を選択」がちゃんと「Select Language」になって、選ぶ言語も英語表示になってます。
これで安心です。

 

自動翻訳のため、精度はやっぱりまだ微妙。
でもとりあえず多言語化したいって時には超簡単で便利なツールです。

 

jQuery masonryはIE7非対応なので・・・

いや~まさか今!この時代に!masonryを使ったグリッドレイアウトでまさかのIE7対応することになるとは!
やっとIEの呪縛から抜け出せてきた今日この頃でしたのに!

しかしクライアント様のサイトのエンドユーザー様様にIE7を使ってらっしゃる方がいるというのならばなんとか対応してあげたいところ。

結論から言うと、別のプラグインを使うべき。

私が乗り換えたのは↓こちら

jquery.vgrid.js
http://blog.xlune.com/2009/09/jqueryvgrid.html

5年も前のプラグインですね。にょろにょろ動くグリッドレイアウトが流行ったのももうそんな昔・・・
しかしここにきてとてもお世話になったので、作者様には感謝です。

 使い方はサイト&demoのソースを見ればOK。
masonryとほぼ同じ。

日本の方が作ったプラグインなので、説明が日本語なのも嬉しポイント。

 

bxSliderでmode:fadeが効かない

カスタマイズがしやすくて、設置も簡単で言うことなしの万能スライダーbxSlider。
大好きすぎてスライダー実装する制作では8割がたこのスライダーを使用しています。
メインビジュアルだけでなく、スライド系のところはもう全部これ。

http://bxslider.com/

そんな大好きなbxSliderでフェードモードが効かないという状況に陥り、ググってもダメで、いろいろやってみて解決したのでメモ。

fade:’mode’が効かない

「mode:’fade’」とオプション指定すると、横スライドではなくフェード切り替えになるはずなのですが、
なぜか画像が出ない。一枚も。

「mode:’horizontal’」とか「mode:’vertical’」は問題ないのに。なぜ・・・

解決:overflowが問題でした。

ulにoverflow:hiddenしていたことが原因でした。。
フロートするリストが多くて、フロートクリア用に全部まとめてul{overflow:hidden}ってな感じで指定しちゃってたのがまずかった。

設定を解除するか、bxSliderを使うulだけ「overflow:visible;」に設定すればOK。