Tag: wordpress


YARPPリスト表示時の関連スコアを非表示にする|WordPress

2016年10月09日 wordpressプラグイン

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

 

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

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

sc

 

 

CSS

abbr{
display: none
}

これだけ!

サイト内検索フォーム|wordpress

2016年10月08日 wordpressテンプレートタグ

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

テンプレートタグ

<?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;
}

「短縮URLを取得」ボタンを表示

2016年01月14日 wordpress管理画面

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

function.php

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

 

画像をアップロードする際に自動的にリサイズする

2015年04月11日 wordpress画像

1024px以上のもをアップロードしても、アップロード時に縦横長い方を
【ダッシュボード→メディア設定】の大サイズ(1024pxがデフォルト)にリサイズします。

 

function.php

function otocon_resize_at_upload( $file ) {
 // $file contains file, url, type
 // array( 'file' => 'path to the image', 'url' => 'url of the image', 'type' => 'mime type' )

// resize only if the mime type is image
 if ( $file['type'] == 'image/jpeg' OR $file['type'] == 'image/gif' OR $file['type'] == 'image/png') {

// set width and height
 $w = intval(get_option( 'large_size_w' ) ); // get large size width
 $h = intval(get_option( 'large_size_h' ) ); // get large size height

// get the uploaded image
 $image = wp_get_image_editor( $file['file'] );

// if no error
 if ( ! is_wp_error( $image ) ){
 // get image width and height
 $size = getimagesize( $file['file'] ); // $size[0] = width, $size[1] = height

if ( $size[0] > $w || $size[1] > $h ){ // if the width or height is larger than the large-size
 $image->resize( $w, $h, false ); // resize the image
 $final_image = $image->save( $file['file'] ); // save the resized image
 }
 }

} // if mime type

return $file;

}
 add_action( 'wp_handle_upload', 'otocon_resize_at_upload' );

 

容量が大きすぎると、アップロード自体ができないので、アップロードのサイズの上限を上げておいた方がいいです。

アップロードファイルサイズの上限を変更|WordPress

 

プラグインに頼らないページネーション|WordPress

2014年11月27日 wordpressテンプレートタグ

function.php

/** ページネーション */
 function pagination($pages = '', $range = 4)
 {
 $showitems = ($range * 2)+1;

global $paged;
 if(empty($paged)) $paged = 1;

if($pages == '')
 {
 global $wp_query;
 $pages = $wp_query->max_num_pages;
 if(!$pages)
 {
 $pages = 1;
 }
 }

if(1 != $pages)
 {
 echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";
 if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
 if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";

for ($i=1; $i <= $pages; $i++)
 {
 if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
 {
 echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."#news' class=\"inactive\">".$i."</a>";
 }
 }

if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";
 if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
 echo "</div>\n";
 }
 }

 

テーマファイル

<div class="navigation">
 <?php if (function_exists("pagination")) { pagination($additional_loop->max_num_pages); } ?>
</div>

 

スタイルシート

下記のスタイルシートで、自由なデザインに。。。

.navigation{
 width: 100%;
 height: auto;
 float: left;
}

 .pagination {
 clear:both;
 padding:20px 0;
 position:relative;
 font-size:11px;
 line-height:13px;
 }

.pagination span, .pagination a {
 display:block;
 float:left;
 margin: 2px 2px 2px 0;
 padding:6px 9px 5px 9px;
 text-decoration:none;
 width:auto;
 color:#555555;
 background: #cccccc;
 }

.pagination a:hover{
 color: #fff;
 background-color: #555555;
 }

.pagination .current{
 padding:6px 9px 5px 9px;
 background: #555555;
 color:#fff;
 }

複数のサイドバーテンプレートを表示する方法

2014年09月09日 wordpressテンプレートタグ

1.「sidebar-●●●.php」というファイルを作成

2.テンプレート内に以下を入力

<?php get_sidebar(‘●●●‘); ?>

 

カテゴリー毎にsingle.phpのデザインを変更する方法

2014年06月06日 テンプレートタグ
<?php
 $post = $wp_query->post;

if ( in_category('カテゴリーID') ) {
 /* カテゴリーID1 */
 include(TEMPLATEPATH.'/single-1.php');

}

else {
 /* それ以外 */
 include(TEMPLATEPATH.'/single-default.php');
 }
 ?>

“カテゴリーID”の投稿は[single1.php]のデザインを使用してそれ以外の投稿は、[single2.php]のデザインを使用する。
という内容。

single.phpのコードはこの記述のみ。
あとはsingle1.php、single2.phpにそれぞれ単一ページ用のコードを記述。

もっとたくさんデザインを使い分けたいとき

2つだけだはなく、もっと多くのデザインを使い分けたいときは

 <?php
 $post = $wp_query->post;

if ( in_category('カテゴリーID1') ) {
 /* カテゴリーID1 */
 include(TEMPLATEPATH.'/single-1.php');

}

elseif ( in_category('カテゴリーID2') ) {
 /* カテゴリーID2 */
 include(TEMPLATEPATH.'/single-2.php');

}

elseif ( in_category('カテゴリーID3') ) {
 /* カテゴリーID3 */
 include(TEMPLATEPATH.'/single-3.php');

}

elseif ( in_category('カテゴリーID4') ) {
 /* カテゴリーID4 */
 include(TEMPLATEPATH.'/single-4.php');

}

else {
 /* 上記に当てはまらない */
 include(TEMPLATEPATH.'/single-default.php');
 }
 ?>

アイキャッチ画像をLightboxで展開するコード|WordPress

2014年05月24日 wordpressアイキャッチ画像

rel=”lightbox”の場合

<?php $thumbnail_id = get_post_thumbnail_id($post->ID); $image = wp_get_attachment_image_src($thumbnail_id, 'full'); ?>
 <a href="<?php echo $image[0]; ?>" rel="lightbox">
  <?php the_post_thumbnail('thumbnail'); ?>
 </a>

« Previous Entries     Next Entries »