wordpress

引っ越し後メディアライブラリがごっそりない!そんな時はMedia from FTPがあるよ。

サイトのお引越しはALL in one WP Migrationでだいたい毎回一発OKなのですが、
※ALL in one WP Migrationについてはまた後日書きます

ごくまれに記事だけお引越しとか
メディアだけお引越しとか
固定ページのみとか

そういうのがあるとき、wordpressのエクスポート機能だけだと画像をうまく移動できなかったりするんですね。
なので、そういう場合はメディアファイルをFTPなりで落としてきて、それをまたFTPでアップロードして、そのメディアをメディアライブラリから見たら空っぽ!というのも当然で、メディアライブラリとして画像を登録してあげないとライブラリには表示されないというわけなのです。

以前のアップローダーのメジャーどころといえば
WordPress Flash Uploader
だったのですが、1年ほど更新されておらず、使おうとしたところうまく機能しませんでした。
アップロード自体はできるようですが、アップしたデータをメディアライブラリに認識させる機能がうまくいきません。

なので、今回Media from FTPを使うことにしました。
前置きが長いですが・・・

Media from FTPをインストールする

プラグイン→新規追加でMedia from FTPを探してインストールします。
※FTPでは(wordpressのディレクトリ)/wp-content/plugins/にプラグインをアップしてください

FTPで画像ファイルやらをアップする

(wordpressのディレクトリ)/wp-content/uploads/
に、画像をアップします。

設定をしていきます

設定:登録

現在の日時で登録するならこの画面は編集しなくてOK。
データのお引越しで紐づけ等を考慮するなら「ファイルの日時を取得し、それに基づいて更新。必要に応じて変更。」を選択。
年月日でフォルダ分けをしたくない場合は、こちらの画面の
アップロードしたファイルを年月日ベースのフォルダに整理をチェック外してください

設定:検索


検索ディレクトリはファイルをアップしたディレクトリに適宜変更。
ページ送りはデフォルトでは20でしたが、ここも適宜変更。
※サーバに負荷がかかるため、できれば少しずつが良いと思います。。
検索結果の表示の箇所を、これも好みになりますが
一般的でない選択。ファイルネームのみ表示します。大量のデータの検索に適しています。高速です。
にチェックを入れるとサムネイル表示されなくなりますが読み込みは早くなります。玄人向け。

検索&登録


検索&登録からファイルを検索して一括で登録!
これでおしまいです。
メディアライブラリに画像が登録されているのを確認できましたでしょうか。
記事と登録時のファイル名が合致していれば記事にも表示されているはず・・・

Elementorが突然使えなくなったら疑うべきポイント4つ

焦りました。
Elementorを使ってこつこつとLPなどを作っていましたが、
急に・・・

こんな画面に!
どうすればええんや・・・

疑うべきポイント1 プラグインを停止する

十中八九これで解決します。
Elementorのインストールより後に入れたプラグインを一つずつ停止させる。
インストールした日付けが分からないよ!という方は、
FTPかまたはコンパネからファイルマネージャーを見られるならば、
wordpressのルートからpluginの中身を確認すればインストールした日付けが分かります。

(wpのルート)/wp-content/plugins/

間違ってもプラグインの更新など先にされませんよう。
ここを確認して、一番日付けの新しいプラグインから停止していきましょう。

ちなみにですが、自分が引っかかっていたのは、MW WP Formでした。
コンフリクトを起こしてしまうみたいですね。アップデートに期待です。
  

疑うべきポイント2 アップデートしたプラグインを疑う

アップデートしたプラグインがElementorに対して何かしらコンフリクトを起こしてしまっている可能性あり。
ポイント1で紹介した通りの方法で、一番日付けの新しいプラグインを停止させてみてください。
  

疑うべきポイント3 ブラウザのメモリ不足

ブラウザの窓開きすぎていないでしょうか。閉じましょう。
他のブラウザで起動してみて動くようでしたらお使いのブラウザの問題です。
  

疑うべきポイント4 サーバの仕様が変わった

ありえないと思いますが、PHP7→PHP5に何故か切り替わってしまった。
elementorはPHP7で動作しますので、何かしらの理由で切り替わっていたらPHP7に変更します。
  

elementor自体をアップデートしてみる

これは可能性としては低いですが・・・
elementor自体をずっとアップデートしていないのであれば、プラグインの更新を行ってください。
  

elementor便利ですよね。
時間のないときにささっと作れるし、ABテストするのにも時短になるし。
これからも便利に使っていきたいのでコンフリクトに気を付けてHappyなwordpressライフを・・。

Custom Field Suiteのインポート・エクスポートが使えないときの解決法

Custom Field Suite便利ですよね。
Custom Field Suiteにはインポート・エクスポート機能があるんですが、
実際には使えない事が判明。

えー、いっこいっこ手作業で移さないといけないの?
もしくはデータベース毎移す?
どうしたもんか・・・と思ってましたが、

wordpress自体のインポート・エクスポートを使えばいいのでは?
と思ったら

できました。

ということで備忘録ですが、
wordpress管理画面の左メニュー
ツール

エクスポートページから
フィールドグループを選択

エクスポート
これでカスタムフィールドをエクスポートできました。

お引越し先のサイトにCustom Field Suiteをインストールして

wordpress管理画面の左メニュー
ツール

インポート

wordpressインポーターをインストールしていない人は
ここでWordPressをインストールします。

ダウンロードしたデータを選択してアップロード。

これでカスタムフィールドのみお引越しが完了しました。
両方のサイトのカスタムフィールドが同じか確認しましょう。
同じであれば無事にインポートが完了です。

Custom Field Suiteのインポーターがなぜ使えないのかよくわかりませんが・・
同じようなところで引っかかってしまった方の助けとなれば幸いです。

OrbitFoxでElementorやその他ページの強化ができるよ!メニューにアイコン、シェアリンクなど

前回メニューにFont Awesomeを付けたい人用の記事を書きましたが、
本当はもっと簡単にアイコンつける方法があるんです。ごめんなさい。メニューアイコンにとどまらず、Elementorを導入している方ならOrbit Foxを入れるともっとウェブサイトの装飾を補強できるかも。

↓ダウンロードはこちらから
Orbit Fox Companion
 

Orbit Foxを使うと何ができるのか

・elementor用のデザインテンプレートが10個!
・elementor用のデザインウィジェットが6個
・メニューにアイコンを付けられる!
mystock.photosから直接画像をインポートできるよ!
・シェアボタンを簡単につけられるよ!(よくみかけるやつ)
 
 

Orbit Fox Companionの使い方手順(メニューにアイコン表示させる方法)

・プラグインをインストールします
・有効化してください
・ObitFox→General Settings→Menu IconsがActivateになっているのを確認

 
・外観→メニュー→メニューの文字の左側に+ボタンが表示されているのを確認して

 
・ぽちぽちっと押すと一覧からアイコンが選べるので選択

 
・フロントに戻って確認!素晴らしい。
 
・ソーシャルアイコンを表示させたい時はSocial Sharing ModuleをActivateして

 
・下の方にActivated Modules OptionsのSocial Sharing Moduleが出てくるので右側の開くボタンをぽちっとするとずらっと設定が出てきます。

 
 
Display On(どこに表示させるか)
Posts(投稿)、Pages(ページ)に表示させるかを選べますどっちにも表示できるよ!
 
Desktop Position(PCでの表示位置)
Left(左に表示) Right(右に表示)
 
Mobile Position(モバイル時の表示位置)
Pinned to bottom(最下部) Same as desktop(PC表示と同じ設定)
 
Show name(SNS名を表示させるか)
Show network name on hover(マウスオーバー時にSNS名を表示するよ)
 
Networks
ここで表示させたいSNSを選んでね。
PC表示のみ、モバイル表示のみが選べます。
 
ということで、もっと簡単にメニューにアイコンを表示させる方法&SNSアイコン表示方法でした。
elementorのオプションについてはelementor使ってると自然にわかるので割愛!
 
 
追記:
メニューアイコンを表示させるときに、文字とアイコンがくっついてしてしまって気持ち悪いなと思ったら、
style.cssとかcssファイルに

.obfx-menu-icon {
	margin-right:5px;
}

こんな感じで入れると良いと思いますよ!

FontAwesome4すっげーフォントすっげー

カスタムメニューにアイコンをつけたい。しかもできれば超簡単に。
なんかみんなつけてるし、見栄えよくなるよね!
bootstrap対応のデザインテーマならそのままあれこれやって使用することができますが、対応してないデザインテーマの場合はこちらのプラグインを入れると幸せになれるかもしれません。

↓ダウンロードはこちらから
Font Awesome 4 Menus

Font Awesome 4 Menusの使い方手順

・プラグインをインストールします
・有効化してください
・設定→Font Awesome
・Load Font Awesome 4 Fromで、既にfont awesomeが入ってる人は、Don’t load Font Awesome 4’s stylesheet (use this if you load Font Awesome 4 elsewhere on your site)を選択してね
・メニュー→表示オプション→CSSクラスにチェック

 

・メニューのとこにcss入れられるようになったので、チートシートからアイコンを探してタグを入れます。

使えるアイコンはこちらのチートシートを。
メニューを更新したらサイトを見てみましょう。

 

表示されましたか?
これでちょっとこじゃれ感が出ましたね!
表現が古いですね!

ちなみにですが、Font Awesomeをそのまま英訳すると
フォントすごい
ふぉんとすごい
ほんとすごい…
フォントすっげー!

これが言いたかっただけです…

wordpressでループの中にループを入れたら詰んだ

Elementorで作ったページはウィジェット配置とかめんどくさい事しない限りPHPをじかに書くことはできないので、functionにショートコードを作って、外からPHPファイルを読み込むことにした。

 

やりたかったこと

トップページによくある、新着情報一覧(複数カテゴリ)を、カテゴリーも表示させたものを表示させたい。

2018年1月11日 カテゴリ名
記事タイトル

こんなかんじの。

 

結論から言うと、成功した。successである。

結論から知りたい人はこちら

・function.phpにショートコードと呼び出すファイルを指定
・読み込むphpを作成
・ショートコードをループ内に配置

・function.php

// phpファイルをショートコードにして埋め込む
function short_php($params = array()) {
  extract(shortcode_atts(array(
    'file' => 'default'
  ), $params));
  ob_start();
  include(STYLESHEETPATH . "/news.php"); // STYLESHEETPATHはテーマのstyle.cssのある階層
  return ob_get_clean();
}
add_shortcode('topics', 'short_php'); // topicsはお好きな名前に。

 
・外部php

<?php query_posts("post_type=post&posts_per_page=5&cat=1,5"); ?>

<?php if(have_posts()): ?>
<div class="news tab-content">
<?php while(have_posts()):  the_post();
$cat = get_the_category();
$cat = $cat[0];
$cat_name = $cat->cat_name;
$cat_slug = $cat -> slug;
?>
<dl class="">
<dt><span class="date"><?php the_time('Y年m月d日'); ?></span><span class="<?php echo $cat_slug; ?>"><?php echo $cat_name; ?></span></dt>
<dd><span class="ttl"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span></dd>
</dl>
<?php endwhile; ?>
</div>
<?php else: ?>
<?php endif; ?>
<?php wp_reset_query(); ?>

・埋め込んだショートコード(さっき作ったtopicsは任意の名前に)

[topics]

これで表示できるようになった。

何で詰んだのか

何に詰んだのかというと、ループが1つだけの場合、別にreset_queryはいらないんですが、入れ子(ネスト)した場合は、きちんとwp_reset_queryを入れてやらないと、ループの外に中でループした内容がさらに出てきちゃうという。
うまくいかなくて2時間くらいは悩んだと思う。
これを読んだ人が悩みませんように・・なむなむ。

あと、例に示したPHPは色々間違ってるかもしれないので、ちゃんとしたPHPを書いている人を参考にしたほうが良いです。