mania-ku

何か作りたいプログラマ未満。

管理画面に不正アクセスを受けた@ロリポップ

帰省から帰ってきたら、ブログの管理画面に「WordPressログイン画面へのアクセス制限が実施されています」のメッセージが・・・
ロリポップで総当たり攻撃や辞書攻撃を検知した場合にログイン画面にアクセス制限をかけてくれるサービスのようです。
すぐさま旦那さんに相談して「ログイン画面にIP制限をかけ」てもらい、通常のログイン画面に戻してもらいました。
総当たり攻撃や辞書攻撃を防ぐにはどうしたらいいのでしょうか?

ログイン画面にIP制限をかける

アクセスできないようにすれば攻撃できませんよね。

  1. 1.ロリポップのユーザ画面で、「WEBツール」>「ロリポップ!FTP」>「.htaccess」を開いて、編集。
  2. 2.接続するIPアドレスを調べて、「Allow from IPADRESS」のIPADRESS部分を差し替える。
    複数IPアドレスを登録したい場合は「Allow from IPADRESS」をコピーして、改行して増やす。
  3. 3.「保存する」をクリックする。

WordPressのインストール先を変える

ロリポップの通常インストールやWordPressの通常のインストールをするとルートパスにインストールされてしまいますが、サブディレクトリにインストールしてルートパスで表示する方法があります。これだと攻撃を受けにくくなります。

ログイン画面のURLを変える

Stealth Login Pageなどのプラグインを使うと、デフォルトのログインURLとは異なるため攻撃を受けにくくなります。

【WordPress】記事の1枚目の画像か、OGP画像のデフォルトの画像を取得する

このブログはFacebookとTwitterに自動投稿し、ときどきGoogle+にも手動で投稿しています。
そろそろ記事特有の画像を使いたいと思い、「記事の1枚目の画像か、OGP画像のデフォルトの画像を取得する」方法を調べてみました!

function.phpで記事の1枚目の画像か、OGP画像のデフォルトの画像を取得する

※以前載せていたWordPress(ワードプレス)で記事の一番最初の画像を取得する方法 | 株式会社LIGのコードだと取得できなくなっていたので、新しいものに書き換えました。

function catch_that_image() {
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];
	if(empty($first_img)){ //Defines a default image
		$first_img = デフォルトの画像パス
	}
	return $first_img;
}

取得した画像をheader.phpで呼び出す

<meta property="og:image" content="<?php echo catch_that_image(); ?>">

参考サイト:構想雑文 : [Wordpress]投稿記事から画像を取得し、リサイズして画像を画像を表示させるには – livedoor Blog(ブログ)

【WordPress】テーマを3代目にしてみた

WordPress3.8.1にアップデートするときにテーマを変更したかったので、またテーマを作ってみました!

今回こだわった・変えたところ

  • ・どっかにロングシャドウを使いたかったので、使ってみた。
    ジェネレーター:Long Shadows Generator
  • ・前検索が下でユーザビリティが悪かった気がしたので、上に持ってきた。
  • ・フラットデザイン的なふんいき
  • ・字をでかくする
  • ・あまりつまってないフォントを使う。
  • ・aタグは蛍光マーカーのような感じで

次回気をつけたいところ

  • ・iframeの存在を忘れない。
  • ・サイト内検索のタグとカテゴリを変更したときに、検索結果でもそのままのoptionにしたい。
  • ・もうすこしWordPressに慣れる
  • ・PHPもっと勉強する
  • ・なるべく旦那さんに聞かない

【WPプラグイン】アマゾンアソシエイトをスタイリッシュに表示するAmazonJS

たまにアマゾンアソシエイト貼っているんですが、そのまま貼付けるとなんか野暮ったいですよね。
そんなときはAmazonJS
いい感じにスタイリッシュにしてくれます。

通常アマゾンアソシエイト

通常アマゾンアソシエイトはこんなかんじで表示されます。
例として最近レンタルではまってるもやしもんでも。
・見た目が野暮ったい
・プレビューで表示できない
のがつらいですよね

Amazon JS

Amazon JSだとこんなかんじで表示されます。
比較のためにこちらももやしもんで。
・スタイリッシュな見た目
・レスポンシブに対応してるっぽい
のがいいですよね。

Amazon JSを導入する

管理画面>プラグイン>新規登録から「AmazonJS」を検索してインストールします。
管理画面>設定>AmazonJSをクリックして設定画面を開きます。
設定には「アクセスキーID」と「秘密アクセスキー」、そして「アソシエイトタグ」が必要です。
アソシエイトタグは、日本語で取得できるので大丈夫。
問題は「アクセスキーID」と「秘密アクセスキー」です。(英語で取得する必要があるっぽい)
私はわからなかったので、旦那さんにお願いしました。
Access Key IDとSecret Access Keyの取得 – Amazon Web サービスを参考にしました。

【WordPress】管理画面のサイドバーにショートカットを追加

WordPressの管理画面のサイドバーにショートカットを追加する方法を調べてみました。
今回は自分の投稿一覧へのリンクをサイドバーの一番上に表示して、アイコンはアバターのアイコンにしてみました。

2014/02/01追記
httpとhttpsをどちらとも使える方法に変更しました。

add_action( 'admin_menu', 'register_menu_page' );

function get_avatar_url($id_or_email, $size = null, $default = null, $alt = null){
    $image = get_avatar($id_or_email, $size, $default, $alt);
    if(preg_match("/src='(.*?)'/", $image, $match)) {
        if(isset($match[1])) {
            return $match[1];
        } else {
            return false;
        }
    } else {
        return false;
    }
}

function register_menu_page(){
	//管理画面のサイドバーに追加:add_menu_page( ページのタイトル, メニーのタイトル, ,メニューページのコンテンツを表示するPHPファイル, メニューページにコンテンツを表示する関数 )
	//ユーザのアイコンを取得する:get_avatar( IDもしくはメールアドレス, 画像のサイズ, デフォルトで表示するもの, ALT )
	add_menu_page('タイトル', '自分の投稿ページ', 'manage_options', 'page_redirect','redirect_url',get_avatar_url(get_current_user_id(), 16),1);
}

$current_pageURL = $current_protocol.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];

function redirect_url() {
	$redirect_url = get_bloginfo('url').'/wp-admin/admin.php?page=page_redirect';
	if( isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') {
		$current_protocol = 'https://';
	} else {
		$current_protocol = 'http://';
	}
	$pageURL = $current_protocol.$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
	$external_redirect_url = admin_url( 'edit.php?post_type=post&author='.get_current_user_id(), 'admin' );

	if ($pageURL == $redirect_url) {
		wp_redirect( $external_redirect_url, 302 );
	}
}

add_action( 'admin_menu', 'redirect_url' );

【Advent calendar】ブログを更新する便利ツール

これはadvent calendar7日目の記事です。
6日目のおとといは横浜の動物園野毛山動物園/金沢動物園はオススメ! でした。

私はブログを書くタイミングとしては、自分の中で忘れたくないことやメモしておきたいことがあったときに書いています。
まぁ・・・備考録ですね。
他には面白い場所に行ったときや、残しておきたい考え事なんかも。
忘れたくないことなんかは仕事中に起きたバグやその解決法、調べ物をしていて知ったことなんかをブログにしています。

WordPress

このブログで使っているCMS(コンテンツをまとめて管理するシステム)です。
プログラムがよくわからないながらも、旦那さんに教えてもらいながらカスタムしました。

WP Emmet

WordPressプラグインで、投稿するときEmmetでHTMLを記述することができます。
ビジュアルエディターを使わないので、すごく役立ってます!

WP SyntaxHighlighter

WordPressプラグインで、ソースコードをハイライト表示します。
HTMLやCSS、JSを記述するときに使います。

Create Link

Google Chromeで任意の形式でタイトル、URLをコピーできます。
参考サイトや過去の記事のリンクを簡単に作ることができます。

Evernote

メモを会社と家で共有するために使っています。
またTODOリストや買い物メモにも使っています。

Qiita [キータ]

ブログのネタを簡単に書き残せるので、バグやその解決方法、調べ物をしていて知ったことなどを書いています。
仕事中に簡単にメモして、それを詳しく調べたあとブログに書くことが多いです。

8日目の明日はブログを更新する便利ツールです。
へばのー;)

【WPプラグイン】WP Emmetに入れ替えた

WP Zen-codingが古くなったので、WP Emmetに入れ替えました。

ちょっと使ってみた感想としては、フォントサイズ変えられればいいのになぁ・・・ということです。
ノートPCだと16pxは大きすぎます・・・12pxくらいにできるようにならんかなぁ・・・

なお、連休に行きました富士Qハイランドは涼しく、温泉がとても気持ち良かったです。
温泉に住みたい系嫁としては、将来、旦那さんに温泉のクライアントが一社くらいできて、半年に一回くらい温泉旅行ができたらいいなー

2013都議選とインターネット利用とWordPress

夏休みにはちょっと(だいぶ?)早いですが、2013都議選とインターネットとWordPressを題材に自由研究(?)をしました。
きっかけはインターネット選挙運動解禁されたけど、候補者や当選者はどれだけインターネットを使っているものなのか純粋に興味があったからです。
とは言っても、調べて情報をGoogleDocsに集め集計(Google Apps Script初利用!利用方法間違ってないといいけど。。。)しただけですが・・・。
人数が多かったため、始めた日から一週間もかかってしまいましたorz

【WordPress】Yet Another Related Posts Pluginで関連記事を出す

そういえば関連記事を出してなかったなぁ・・・と思って、昨日からプラグインを入れてみました。
Yet Another Related Posts Pluginです。

まだCSSは修正していませんが、精度はわりといい感じ。
管理画面>設定>関連記事 (YARPP)からカスタマイズできます。

【WordPress】ビジュアルエディタいらないと思ったら

コーディングができたりすると、ビジュアルエディタが必要なかったりしますよね。
間違って開いてしまって、pタグがいっぱいになったりということも・・・

ビジュアルエディタの消し方

管理画面>ユーザー>あなたのプロフィール>ビジュアルリッチエディターを使用しない
のチェックを入れましょう。

投稿画面でZencodingを使うには

ビジュアルエディタを消しただけでは、使いづらい面があると思います。
でもZencodingを使えたらとても便利ですよね。
そんなときはWP Zen-Codingというプラグインを使うと簡単です。