カテゴリー別アーカイブ: その他

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

ちょっとハマった案件があったので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行目で全部まとめて表示する。

以上です。

 

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

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

いつも、全角と半角を間違える。
今までの記事を確認すると、ちょくちょく英語が全角になってることがある。
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」になって、選ぶ言語も英語表示になってます。
これで安心です。

 

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

 

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。

wordbookerからSocial Networks Auto Posterに乗り換えてはまった罠

FB投稿(リンクシェア)が一般に公開されない!

wordbookerが設定も簡単で重宝していたのですが、今月あたりから使えなくなり、サポートも終了とのことで乗り換えプラグインを探すことに。

いろいろ調べて「Social Networks Auto Poster」が便利そう!で入れてみました。

wordbookerではAppを作る必要がなかったのですが、
Social Networks Auto PosterではFB Appを作成しAppIDとPWが必要になります。
そこが面倒だったのですが、設定もわかりやすく、無事WP投稿がFBのタイムラインに反映されてよかったよかった。

と、安心してたら問題が。。。

FB投稿(リンクシェア)が一般に公開されない!

FB管理者で入って確認するとちゃんと反映されてるし一般公開になってるのに
ログアウトしてFBページを見てみると反映されていない。。

原因はプラグインじゃなくてFB APP

Appについて無知だったことが一番の原因なんですが・・・

▼赤枠の部分がじゃなくてになっていたら要注意。
マウスを当てると「not available to all users because your app is not live」になります。
つまり、「アプリが生きていないため、すべてのユーザーが利用できない」ってこと。

fbapp

こりゃいかん。

解決策

①まずSetting(設定)画面でメールアドレスを入力し、変更を保存。

fbapp2

②次にStatus&Reviewを開き、「公開しますか?」的な英文の横のボタンをクリックしYesに。

fbapp3

なんかウィンドウがでてきたら「承認」をクリック。

▲さっきだった部分がになります。

 

これで完了。

今まで公開されていなかった投稿も全部一般にも公開されました!

 

 

 

 

 

良く使うTwitterウィジェットカスタマイズ

・ベースはダーク。
・ヘッダー/フッターなし。
・背景色なし。
・スクロールバーなし

<a class="twitter-timeline" data-theme="dark" data-dnt="true" href="https://twitter.com/sampledesuyo" data-widget-id="365155945216614402" data-chrome="noheader nofooter transparent noscrollbar"data-link-color="#CCCCCC">@サンプルですよ からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

 使うときは↑をコピペして、

href="https://twitter.com/sampledesuyo" data-widget-id="365155945216614402"

の部分を自分のに変更する。

▼実際の表示(親divに背景色#333指定)


幅と高さはスタイルシートで。

iframe{
width:100% !important ;
height:200px !important;
}

box-shadowが効かない

box-shadowを付けたいボックスの下の要素にbackgroundが入っているとbox-shadowが効かない・・・というか見えなくなってしまう。

↓の図でいうと、1番目のDIVは2番目のDIVのbackgroundがnoneなのでシャドウが効いてる。
2番目のDIVは3番目のDIVにbackgroundが入っているため効かなくなっている。
3番目のDIVは下に何もないので効いてる。

2014-06-23_011948

 

解決策

▼効かなくなってしまったボックスにこれをつける

div#box02{
	position:relative;
	z-index:2;
}

z-indexの値は適当に。

2014-06-23_012726