WordPressをhttps化する方法とさくらサーバーでの注意事項

さくらサーバでWP構築したサイトをSSL化したい。


↑とても親切で、全頁SSL化したいときは一発でした!



↑全ページではなく、Wordpress HTTPSプラグインを利用して、部分的にSSL化したかったので、下のページのやり方をやったら、CSSやjsのみSSLで読みこめた~!

ssl.jpg

SSL Hostのドメインの「www.」をとったら、うまくいった。

LINEで送る のURLはこんなかんじ。

<a href="http://line.me/R/msg/text/?【テキストやURL】">
このページを友達にLINEで教える。
</a>


UTF-8への変換ツールは
http://www.tagindex.com/tool/url.html

inputやselect textarea一括で格好よくcss設定したい

/* 入力フィールド共通 */
select,
textarea,
input.tel,
input[type="url"],
input[type="file"],
input[type="text"],
input[type="email"] {
font-size:120%;
font-family:"メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
width: 96%;
margin-bottom:1%;
padding: 1.5%;
border: 1px solid #000000;
box-sizing: border-box;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* 電場番号の上下矢印非表示for Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

スマホサイトをデザインするとき、どのくらいのサイズ(キャンパス)で作成すればいい?ファーストビューは?

iPhone4/4S: 640×960(ファーストビュー)
iPhone5/5S/5C: 640×1136( 〃 )
iPhone6 : 750x1334( 〃 )

なので、
幅640ピクセルでデザイン作成していただけるとちょうど良い感じになります。

カスタム投稿でアイキャッチを使う

何度か失敗したので、うまくいったときの記事を引用してメモ。


カスタム投稿でアイキャッチを使う方法

上の記述をしていても、カスタム投稿ではアイキャッチが利用できませんでした。

どうやら、カスタム投稿の設定で、引数?「supports」に『アイキャッチ使えるように』って値を与えてあげないといけないらしい。

'supports' => array( 'title', 'editor', 'thumbnail')
これだと、タイトルと編集とアイキャッチ画像。という意味ですね。

例えば、『blog』というカスタム投稿タイプでアイキャッチを使えるように設定する場合、
------------------------------------------------------
add_action( 'init', 'blog_init' );
 
function blog_init() {
    $args = array(
                    'supports' => array( 'title', 'editor', 'thumbnail')
                    );
    register_post_type( 'blog', $args );
}
------------------------------------------------------
これでカスタム投稿でアイキャッチが使えるようになりました。

あと注意しないといけないのは、register_post_type()は'init'アクションから呼び出さないといけないということでしょうか。


私は「information」という名前のカスタム投稿を追加してて、出来上がりは

------------------------------------------------------
add_action( 'init', 'information_init' );

function information_init() {
$args = array(
'supports' => array( 'title', 'editor', 'thumbnail')
);
register_post_type( 'information', $args );
}
------------------------------------------------------
supportsを変更したくなりがちだけど、違うみたいね。




▼ついでに
表示するためのタグも
<?php if(get_the_post_thumbnail( $id )): //アイキャッチあれば ?>
  <?php echo get_the_post_thumbnail( $id,'サイズ名' ); ?>
  <?php else: //無い場合の処理 ?>
   
  <?php endif; ?>

レスポンシブに最適なフォントサイズ

文字サイズの単位、迷いますよね~~

font-size:2.7vw;

↑ vwを使ってから、さらにその子孫に%やemを使えば、
相対的に、デバイスサイズに合わせて伸び縮みしてくれます。

jquery で、inputのvalueが空の場合、要素を非表示

$("ul li:has(input[value==''])").addClass("disnon");

今日かけた、一押しコード!

PHP を使って現在開いているページの URL をウェブページ上に表示する方法を使って、OGタグに利用

■PHP を使って現在開いているページの URL をウェブページ上に表示する方法を使って、OGタグに利用
<meta property="og:url" content="<?php echo("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>" />

アメブロ→Wordpressに引越するとき全記事日付が1970年1月1日になっちゃった人へ

アメブロ→Wordpressに引越(データ移行・インポート)するときの注意

blog toolを使ってやると思いますが、
詳しくはこちら

日付の表示形式の設定が(アメブロ側の)
2013年04月03日(水) 07時19分12秒
と言ったような表示形式なっていると、

コンバータするときにうまくいかず、

全記事日付が1970年1月1日になっちゃいます!!


これを、
2013-02-16 12:51:13
とかにしておけば、
うまくいきましたよー。

wordpress 個別記事でアイキャッチをOGP画像に指定したい

<?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id, true);
?>

<meta property="og:image" content="<?php echo $image_url[0]; ?>" />

1  2  3  4  5  6  7  8  9  10  11