webtips

body {
 animation: fadeIn 2s ease 0s 1 normal;
 -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
 0% {opacity: 0}
 100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
 0% {opacity: 0}
 100% {opacity: 1}
}

カスタム投稿タイプ？

WordPressの「投稿」とは別に、新たに自分で、投稿タイプを増やすためのものです。

プラグインを利用してもいいのですが、プラグインに頼らず、そんなに難しくはないので、テーマをカスタマイズ。

まず、追加するカスタム投稿を以下のようにしたい時

カスタム投稿名→post
表示する投稿タイプ名→ポスト

■カテゴリタクソノミー(カテゴリー分け)
カテゴリー名→post_category
表示するカテゴリー名→ポストカテゴリー

■カテゴリタクソノミー(タグ分け)
タグ名→post_tag
表示するタグ名→ポストタグ

※カテゴリタクソノミーは必要なければ、記述しないでもOK。

function.php

/**———————————————————————————————-*/
/* カスタム投稿タイプを追加 */
add_action( 'init', 'create_post_type' );
function create_post_type() {
 register_post_type( 'post', //カスタム投稿タイプ名を指定
 array(
 'labels' => array(
 'name' => __( 'ポスト' ),
 'singular_name' => __( 'ポスト' )
 ),
 'public' => true,
 'has_archive' => true, /* アーカイブページを持つ */
 'menu_position' =>5, //管理画面のメニュー順位
 'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'custom-fields' ,'comments' ),
 )
 );

/* カテゴリタクソノミー(カテゴリー分け) */
 register_taxonomy(
 'post_category', /* タクソノミーの名前 */
 'post', /* 使用するカスタム投稿タイプ名 */
 array(
 'hierarchical' => true, /* trueだと親子関係が使用可能。falseで使用不可 */
 'update_count_callback' => '_update_post_term_count',
 'label' => 'ポストカテゴリー',
 'singular_label' => 'ポストカテゴリー',
 'public' => true,
 'show_ui' => true
 )
 );
/* カスタムタクソノミー、タグを使えるようにする */
 register_taxonomy(
 'post_tag', /* タクソノミーの名前 */
 'post', /* 使用するカスタム投稿タイプ名 */
 array(
 'hierarchical' => false,
 'update_count_callback' => '_update_post_term_count',
 'label' => 'ポストタグ',
 'singular_label' => 'ポストタグ',
 'public' => true,
 'show_ui' => true
 )
 );
}
/**———————————————————————————————-*/

管理画面のメニュー順位

Yet Another Related Posts Plugin(YARPP)プラグインは、関連する記事を表示してくれるプラグインです。
設定によって、関連する項目や、どれくらい関連があるものを表示するのかを設定できるので、便利なプラグインです。
表示方法も色々と融通が利くので、このサイトでも使用してます。

リスト表示時に関連スコアが表示される！

設定画面でスコア表示の切り替えなどなさそう。。。

CSS

abbr{
display: none
}

これだけ！

検索フォームを設置する時、いつも検索して調べたり、過去に制作したものを参考にしたりしているので。。。

テンプレートタグ

<?php get_search_form(); ?>

htmlとしては下記のように出力されます。

<form role="search" method="get" id="searchform" class="searchform" action="(サイトのURL)">
<div>
<label class="screen-reader-text" for="s">検索:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="検索" />
</div>
</form>

これに合わせてスタイルシート設定すれば、思い通りの検索フォームの完成です。

当サイトの検索フォームはテンプレートタグは使わず、以下の通り

テーマファイル

 <div id="searchform_con">
 <form role="search" method="get" id="searchform" action="<?php bloginfo('url'); ?>" >
 <input type="text" value="" name="s" class="s" />
 <input type="submit" class="searchsubmit" value="search" />
 </form>
 </div>

CSS

#searchform_con{
 width: 90%;
 height: auto;
 text-align: center;
 float: left;
 margin-left: 5%;
 margin-right: 5%;
 margin-bottom: 20px;
 background-color: #000000;
}

#searchform{
 width: 100%;
 height: auto;
 text-align: center;
 padding-top: 20px;
 padding-bottom: 20px;
}

#searchform input[type="button"],
#searchform input[type="submit"] {
 background-color: #FFF798;
 background-image: -webkit-linear-gradient(270deg,rgba(255,247,152,1.00) 0%,rgba(255,247,152,1.00) 100%);
 background-image: linear-gradient(180deg,rgba(255,247,152,1.00) 0%,rgba(255,247,152,1.00) 100%);
 border: 1px solid #555555;
 padding-top: 5px;
 padding-right: 10px;
 padding-left: 10px;
 padding-bottom: 5px;
 font-size: 100%;
 color: #555555;
 cursor: pointer;
 width: 10%;
}

#searchform input[type="text"],
#searchform input[type="email"] {
 padding-top: 5px;
 padding-right: 15px;
 padding-left: 15px;
 padding-bottom: 5px;
 border: none;
 font-size: 120%;
 background-color: #FFFFFF;
 width: 30%;
}

#searchform input:link ,
#searchform input:active {
 background-color: #EFEFEF;
 border: none!important;
 -webkit-box-shadow: 0px 0px 0px 0 #F4F4F4!important;
 box-shadow: 0px 0px 0px 0 #F4F4F4!important;
}

#searchform input:hover {
 filter: alpha(opacity=80);
 -moz-opacity: 0.80;
 opacity: 0.80;
 transition: 1.0s;
}

#searchform a:focus, 
#searchform input:focus{
 outline:none;
}

見出しなど一文字目を大きくしたり、色を変えたり。。。

html

<h1>大きな一文字目</h1>

CSS

h1 {
 font-size:20px;
}

h1:first-letter {
 font-size:50px;
 color:blue;
}

CSS

transform: rotate(10deg);

rotate()には回転する角度を指定

WordPressをアップデートしたら、編集画面のパーマリンクの「編集」ボタンの横に「短縮URLを取得」ボタンがなくなってしまいました。
けっこう便利だったので、会った方がいいなってことで、以下をfunction.phpに記入

function.php

 /** 「短縮URLを取得」ボタンを表示 */
 add_filter( 'get_shortlink', function( $shortlink ) {return $shortlink;} );