【sublime text】 sftp さくらインターネットの設定

さくらインターネット　レンタルサーバー

sftp-config.json　でのsftp設定

22行目

   "remote_path": "/home/アカウント名/www",

/home/　から設定しなければいけない。

【wordpress】Facebookのシェアが404エラーに

今月頭くらいに突然、facebookのシェアボタンからシェアした投稿のリンクが

404エラーになる現象が起こっていました。

同じ現象でお困りの方、解決作の一つとしてお試しください。

【症状】

• 　iPhone/iPad　のfacebookアプリのみ起こる
• 　wordpressのパーマリンク設定は日本語URLにしていた
• 　シェアボタンはどのプラグインをつけても、直接URLを貼り付けても起こる

調査していくと、原因として、

「日本語URLにしていたため、URLが非常に長くなっていた」ことが原因のようです。

例えば、同じサイト内の固定ページ（URLは半角英数）をシェアしても

正常に表示されましたので。

自分の管理しているブログなら、その都度記事のパーマリンクを編集して
半角英数字に変えれば済むのですが、

クライアントが更新しているブログで、iPhoneアプリ（wordpress）から更新しています。

iPhoneアプリからはパーマリンクを変更できない！

そこで、「RSS Graffiti」を使うことにしました。

RSS Graffitiとは

ブログに投稿すると、自動でfacebookなどに投稿してくれる連携ツール。

その中の機能に、「Bit.ly」を使ってURLを短縮する機能があるのです。

以下の設定方法はfacebookアプリを設定できている状態からの説明です。

設定方法はコチラの記事など参考に

RSS Graffiti 2.0 の使い方 #Facebookアプリ

1. Bit.lyのアカウントを取得します。

　　　　　　https://bitly.com/

右上の赤文字「sign up for free.」をクリックしてアカウントを取得。

facebook・twitterアカウントでも使えます。

2. API keyを取得

 右上のアカウント名のところ、「setting」の中の一番下に 「API key」があるので

それをコピー。

3. 「RSS.Graffiti」アプリに 「API key」登録

facebookの「RSS.Graffiti」アプリ設定画面に戻り、右側の「TARGET」のfacebookページをクリック

「 bit.ly　OPTION」タブを開き、「bit.ly ID（username）」と先ほどの「API key」を入力。

facebookとの連携を許可すると、完了です。

その後の投稿は短縮されたURLが表示され、

無事iPhoneやiPadでもエラーにならずシェアできます。

【jQuery】 BookBlock

本をめくるようなUIのjQuery


デモ
http://tympanus.net/Development/BookBlock/index.html



ダウンロード
http://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/




※覚書

表示したい場所にdivで画像を囲む

<div class="bb-custom-wrapper">
<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item"><img class="alignnone size-full" src="/img1.jpg" alt="free1"  /></div>
<div class="bb-item"><img class="alignnone size-full" src="/img2.jpg" alt="free2"  /></div>
<div class="bb-item"><img class="alignnone size-full" src="/img3.jpg" alt="free3"  /></div>
</div>

<nav>
<a id="bb-nav-first" class="bb-custom-icon bb-custom-icon-first" href="#">First page</a>
<a id="bb-nav-prev" class="bb-custom-icon bb-custom-icon-arrow-left" href="#">Previous</a>
<a id="bb-nav-next" class="bb-custom-icon bb-custom-icon-arrow-right" href="#">Next</a>
<a id="bb-nav-last" class="bb-custom-icon bb-custom-icon-last" href="#">Last page</a></nav></div>


＝＝＝＝＝＝


【コンソールエラー　jquery is not defined　が出た時の対処】

scriptファイルの読み込ませる順番を変えた。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/js/modernizr.custom.js"></script>
<script src="/js/jquerypp.custom.js"></script>
<script src="/js/jquery.bookblock.js"></script>

【Wordpress】管理画面が真っ白になった

サイトは問題なく表示されているが、管理画面へのログイン画面も真っ白になってしまった時の処置法

最初にすること

デバックモードにして、エラーを表示させます。

ルートディレクトリにある『wp-config.php』を修正します。

define('WP_DEBUG', false);

↓修正

define('WP_DEBUG', true);

ここを直してもう一度ログイン画面にアクセスすると、
エラーが表示されます。


ここで表示されるエラーはさまざまだと思います。
エラーが出ているプラグインをサーバーから削除してみるなど対応してみてください。

原因がわかった

今回私のサイトが真っ白になった原因となるエラーは

Fatal error: Allowed memory size of XXXX bytes exhausted.

これでした。

要は「メモリオーバーだよ」ということです。

対処法

『php.ini』を修正します。

最初はphp.iniの場所がわからないですよね。
レンタルサーバーによって違うようですが、


●さくらインターネットの場合は
コントロールパネルの「PHP設定の編集」

●ロリポップの場合は
コントロールパネルの「WEBツール」内の「PHP設定」

（他のレンタルサーバーは管理していないのでわかりません）

memory_limit = 32M
post_max_size = 50M
upload_max_filesize = 30M
max_input_time = 60

↓　1行目を修正　

memory_limit = 64M
post_max_size = 50M
upload_max_filesize = 30M
max_input_time = 60

これで私の場合解決しました！




最後にデバックモードを　

define('WP_DEBUG', false);

に戻すことを忘れずに!!!

【Custom Field Suite】カスタムフィールド投稿を表示する

「Skeleton」テーマにおける【Custom Field Suite】の表示方法



■使用テーマ：Skeleton

スマートフォン・タブレットなどマルチデバイスに対応したレスポンシブテーマ。
ショートコードでカラムやボタン、タブなど、とても使いやすいテーマです。

こちらのサイトを参考

これはかなりの優れもの、スマートフォン・タブレット対応WordPressのテーマファイル -Skeleton

■プラグイン：Custom Field Suite

カスタムフィールドを簡単にカスタマイズ・設置できるプラグインです。

こちらのサイトを参考

WordPress:カスタムフィールドを上手に使いこなす方法

【テンプレートに追加する基本のタグ】

テキスト表示
<?php echo get_post_meta($post->ID,'フィールド名', true);?> 

画像表示
<img src="<?php echo wp_get_attachment_url(get_post_meta($post->ID,"フィールド名",true));?>">




Skeletonテーマには最初から子テーマ「skeleton_childtheme」フォルダが作成してあります。

親テーマの構成が他のテーマと少し違ったので、記しておきます。

【通常の投稿（post）での使用】

親テーマ「Skeleton」フォルダにあるテンプレートファイル　「loop-single.php」にタグを追加します。


【カスタム投稿での使用】

親テーマ「Skeleton」フォルダにあるテンプレートファイル　「loop-single.php」を子テーマ「skeleton_childtheme」フォルダにコピー。
ファイル名を「loop-single-（カスタムポスト名）.php」に変えます。
タグを追加してアップロード。

【flexible posts widget】プラグイン 投稿日を表示

【flexible posts widget】とは、

WordPressのウィジェットに最新記事が表示できるプラグインです。

※Jetpackプラグインの中にも入っています。

• カスタム投稿タイプ・カテゴリーの最新記事も選べる
• 表示する件数を指定できる
• スキップする投稿件数を指定できる
• サムネイルの表示/非表示
• ソートする条件が選べる（日付・タイトル・IDなどなど）
• 新しい日付を上に→　Order　：Descending

検索しても日付を表示する方法が他に出てこなかったので、
残しておきます。

投稿日を表示する方法

カスタムHTML出力テンプレートを作成します

プラグイン公式　installation　より和訳

1. カスタムHTML出力テンプレートを使用するには、あなたのテーマフォルダのルートにflexible posts widgetフォルダを作成します。
2. あなたのテーマのflexible posts widgetフォルダに、wp-content/plugins/flexible-posts-widget/viewsフォルダ内からwidget.phpをコピー。
3. 任意の名前（各ウィジェットのインスタンスごとに異なる​​テンプレートを使用する）にあなたのテーマのwidget.phpテンプレートファイルの名前を変更します。例： my-themes-widget.php
4. ワードプレスの管理画面の'外観'> "ウィジェット"に移動します。
5. [Template Filename]フィールド（デフォルトはwidget.phpとなっている）に、あなたのテーマに追加されたテンプレートファイルの名前を入力します。例： my-themes-widget.php

次に上記3で作成したphpファイル（例 my-themes-widget.php）の中身を変更します。

【修正前】19行目の<li>タグの次の行に

<li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<a href="<?php echo the_permalink(); ?>">

【修正後】以下の1行を追加

<li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<span><?php the_time('Y年n月j日'); ?></span>
<a href="<?php echo the_permalink(); ?>">

以上でタイトルの上に日付が表示されます。