メモ書きだけども。
pre_get_postsのおかげで今まで面倒だった複数のカスタム投稿のアーカイブページを作るのが一瞬だった。
感動したので記事にしておいた。
query_postはあまり推奨されない形になってきているようだけども。
いまのテンプレートの中にquery_postは使っているのだけども新着記事みたいな形で表示させている場合には使えないのかな？
全体に関わる形でなら使えるイメージができるけども、パーツとして記事を呼ぶ場合のは別かな？
と思ったら
get_posts()を使えって事にたどり着いた。
get_posts() は、単にデータを取得するだけで、グローバル変数 $wp_query には影響を与えません。
query_posts() は、グローバル変数 $wp_query を変更します。
昔はこの違いが分からなかったけども、今ならぼちぼち分かる。
あとはメモ
・http://www.monotaro.com/g/00428581/
スペーサー
| |こういうパイプではなくワッシャーと合わさった感じのスペーサーが欲しいんだけどなぁ・・。
コンテンツのWPのところだけどjQueryの箇所とかにぶら下がっている投稿記事がリスト上に表示されていないことは気がついていたけど
ソースを見直してみたら原因が分かったのでメモ
いらない部分は削除した状態で
●修正前
<?php foreach( $categories as $cate ):?> <?php $args = array( 'post_type' => $p_type, 'post_status'=>'publish', 'posts_per_page'=> -1, 'tax_query'=> array( array( 'taxonomy'=> $term, 'field'=>'id', 'terms' => $cate->term_taxonomy_id ) ), ); $the_query = new WP_Query( $args ); $posts = $the_query->posts; ?>
●修正語
<?php foreach( $categories as $cate ):?> <?php $args = array( 'post_type' => $p_type, 'post_status'=>'publish', 'posts_per_page'=> -1, 'tax_query'=> array( array( 'taxonomy'=> $term, 'field'=>'id', 'terms' => $cate->term_id ) ), ); $the_query = new WP_Query( $args ); $posts = $the_query->posts; ?>
tax_queryの中の配列の「’terms’ => $cate->term_taxonomy_id」を「’terms’ => $cate->term_id」に変更
print_rで出していたときにidと書いてあったから目についたものをいれたがこれが場所によってはterm_idと数値が異なる。
これが原因で出る記事とでない記事があった。
なんで微妙にちがうの？とおもって調べたら以下。
はー、そういう事なんだ・・・。
ｂｂｂ://~~~~~~~.com
http://~~~~~~~.com
半角英数の文字で一文をいれ改行・一文をいれ改行・一文をいれ改行
それらを繰り返すと表示画面では通常では1回の改行が2回くりかえされる
ソース的には
sss://~~~~~~~.com「改行」「改行」
となる。
http://~~~~~~~.com「改行」
にしたいのにどうすればいいのか微妙に判断がつかない。
おそらくは
wpautop()の箇所の中身を見てどうなのかを確認してみよう。
sss://~~~~~~~.com
sss://~~~~~~~.com
http://~~~~~~~.com
・http://~~~~~~~.com
urlと判断されたら改行がふえるっぽい？
~~~~~~.com
https://~~~~~~~.com
function.php
//投稿ボックスギャラリー用
/*管理画面が開いたときに実行*/
add_action( 'admin_init', 'my_admin_init2' );
/*更新ボタンが押されたときに実行*/
add_action('save_post', 'save_custom_field_postdata');
/* カスタムフィールドを投稿画面に追加 */
function my_admin_init2() {
add_meta_box( 'my_meta_box_post2', '添付写真', 'my_meta_box_gallery', gallery );
}
/* 投稿画面に表示するフォームのHTMLソース */
function my_meta_box_gallery() {
//既に値がある場合は値をフォームに反映して出力
$uploaded_image = get_post_meta( $_GET['post'], 'upload_image' );
?>
<div id="meta_div">
<?php print_r ($uploaded_image);?>
<ul id="meta_ul">
<div class="uploadedImageView"></div>
<?php
if($uploaded_image == ""){ $num = 1 ; }else{ $num = 0 ; }
$com = $num + count($uploaded_image[0]);
for($i = 1; $i <= $com; $i++):
?>
<li class='inbox'>
<input type='text' class="upload_image" name='upload_image[]' value='<?php echo esc_html($uploaded_image[0][$i-1]);?>'> <span class="upload_image_button">IMAGE</span>｜<span class='deth'>Delete</span>
</li>
<?php endfor;?>
</ul>
<span id="animate">テキストエリアを追加</span>
<div id="mydialog" class="cf">
<div id="drop-files" ondragover="return false">
Drop Images Here
</div>
<div id="uploaded-holder" >
<div id="dropped-files">
<div id="upload-button">
<a href="#" class="upload">Upload!</a>
<a href="#" class="delete">delete</a>
<span>0 Files</span>
</div>
</div>
<div id="extra-files">
<div class="number">
0
</div>
<div id="file-list">
<ul></ul>
</div>
</div>
</div>
<div id="loading">
<div id="loading-bar">
<div class="loading-color"> </div>
</div>
<div id="loading-content">Uploading file.jpg</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function () {
function app(){
var bts = jQuery('.deth').size();
if(bts == 1){
jQuery('.deth').hide();
}else{
jQuery('.deth').show();
}
}
app();
jQuery("#animate").click(function(){
jQuery("#meta_ul li:first").clone().appendTo("#meta_ul");
jQuery("#meta_ul li:last input").val("");
app();
});
jQuery("span.deth").live("click",
function(){
jQuery(this).fadeOut("slow" , function (){
jQuery(this).closest('li').remove('.inbox');
app();
});
});
});
</script>
<?php
}
/* 設定したカスタムフィールドの値をDBに書き込む記述 */
function save_custom_field_postdata( $post_id ) {
$mydata = $_POST['upload_image'];
if ( "" == get_post_meta( $post_id, 'upload_image' )) {
/* upload_imageというキーでデータが保存されていなかった場合、新しく保存 */
add_post_meta( $post_id, 'upload_image', $mydata, true ) ;
} else if ( $mydata != get_post_meta( $post_id, 'upload_image' )) {
/* upload_imageというキーのデータと、現在のデータが不一致の場合、更新 */
update_post_meta( $post_id, 'upload_image', $mydata ) ;
} else if ( "" == $mydata ) {
/* 現在のデータが無い場合、page_layoutというキーの値を削除 */
delete_post_meta( $post_id, 'upload_image' ) ;
}
}
//管理画面にアップローダー用のJSを追加
function admin_js() {
global $post_type;
if( 'gallery' == $post_type ) {
wp_enqueue_script('admin', get_bloginfo('template_url').'/js/my_admin_scripts.js', null, true);
}
}
add_action( 'admin_print_scripts-post-new.php', 'admin_js', 1000 );
add_action( 'admin_print_scripts-post.php', 'admin_js', 1000 );
JS
jQuery(document).ready(function() {
// Makes sure the dataTransfer information is sent when we
// Drop the item in the drop box.
jQuery.event.props.push('dataTransfer');
var z = -40;
// The number of images to display
var maxFiles = 5;
var errMessage = 0;
// Get all of the data URIs and put them in an array
var dataArray = [];
// Bind the drop event to the dropzone.
jQuery('#drop-files').bind('drop', function(e) {
// Stop the default action, which is to redirect the page
// To the dropped file
var files = e.dataTransfer.files;
// Show the upload holder
jQuery('#uploaded-holder').show();
// For each file
jQuery.each(files, function(index, file) {
// Some error messaging
if (!files[index].type.match('image.*')) {
if(errMessage == 0) {
jQuery('#drop-files').html('Hey! Images only');
++errMessage
}
else if(errMessage == 1) {
jQuery('#drop-files').html('Stop it! Images only!');
++errMessage
}
else if(errMessage == 2) {
jQuery('#drop-files').html("Can't you read?! Images only!");
++errMessage
}
else if(errMessage == 3) {
jQuery('#drop-files').html("Fine! Keep dropping non-images.");
errMessage = 0;
}
return false;
}
// Check length of the total image elements
if(jQuery('#dropped-files > .image').length < maxFiles) {
// Change position of the upload button so it is centered
var imageWidths = ((220 + (40 * jQuery('#dropped-files > .image').length)) / 2) - 20;
jQuery('#upload-button').css({'left' : imageWidths+'px', 'display' : 'block'});
}
// Start a new instance of FileReader
var fileReader = new FileReader();
// When the filereader loads initiate a function
fileReader.onload = (function(file) {
return function(e) {
// Push the data URI into an array
dataArray.push({name : file.name, value : this.result});
// Move each image 40 more pixels across
z = z+40;
var image = this.result;
// Just some grammatical adjustments
if(dataArray.length == 1) {
jQuery('#upload-button span').html("1 file to be uploaded");
} else {
jQuery('#upload-button span').html(dataArray.length+" files to be uploaded");
}
// Place extra files in a list
if(jQuery('#dropped-files > .image').length < maxFiles) {
// Place the image inside the dropzone
jQuery('#dropped-files').append('<div class="image" style="left: '+z+'px; background: url('+image+'); background-size: cover;"> </div>');
}
else {
jQuery('#extra-files .number').html('+'+(jQuery('#file-list li').length + 1));
// Show the extra files dialogue
jQuery('#extra-files').show();
// Start adding the file name to the file list
jQuery('#extra-files #file-list ul').append('<li>'+file.name+'</li>');
}
};
})(files[index]);
// For data URI purposes
fileReader.readAsDataURL(file);
});
});
function restartFiles() {
// This is to set the loading bar back to its default state
jQuery('#loading-bar .loading-color').css({'width' : '0%'});
jQuery('#loading').css({'display' : 'none'});
jQuery('#loading-content').html(' ');
// --------------------------------------------------------
// We need to remove all the images and li elements as
// appropriate. We'll also make the upload button disappear
jQuery('#upload-button').hide();
jQuery('#dropped-files > .image').remove();
jQuery('#extra-files #file-list li').remove();
jQuery('#extra-files').hide();
jQuery('#uploaded-holder').hide();
// And finally, empty the array/set z to -40
dataArray.length = 0;
z = -40;
return false;
}
jQuery('#upload-button .upload').click(function() {
jQuery("#loading").show();
var totalPercent = 100 / dataArray.length;
var x = 0;
var y = 0;
jQuery('#loading-content').html('Uploading '+dataArray[0].name);
jQuery.each(dataArray, function(index, file) {
jQuery.post('/date/wp_fileuploads.php', dataArray[index], function(data) {
var fileName = dataArray[index].name;
++x;
// Change the bar to represent how much has loaded
jQuery('#loading-bar .loading-color').css({'width' : totalPercent*(x)+'%'});
if(totalPercent*(x) == 100) {
// Show the upload is complete
jQuery('#loading-content').html('Uploading Complete!');
// Reset everything when the loading is completed
setTimeout(restartFiles, 500);
} else if(totalPercent*(x) < 100) {
// Show that the files are uploading
jQuery('#loading-content').html('Uploading '+fileName);
}
// Show a message showing the file URL.
var dataSplit = data.split(':');
if(dataSplit[1] == 'uploaded successfully') {
jQuery('#meta_ul').append('<li><a href="/date/images/'+dataSplit[0]+'">'+fileName+'</a> '+dataSplit[1]+'</li>');
} else {
jQuery('#meta_ul').append('<li><a href="/date/images/'+data+'. File Name: '+dataArray[index].name+'</li>');
}
});
});
return false;
});
// Just some styling for the drop file container.
jQuery('#drop-files').bind('dragenter', function() {
jQuery(this).css({'box-shadow' : 'inset 0px 0px 20px rgba(0, 0, 0, 0.1)', 'border' : '4px dashed #bb2b2b'});
return false;
});
jQuery('#drop-files').bind('drop', function() {
jQuery(this).css({'box-shadow' : 'none', 'border' : '4px dashed rgba(0,0,0,0.2)'});
return false;
});
// For the file list
jQuery('#extra-files .number').toggle(function() {
jQuery('#file-list').show();
}, function() {
jQuery('#file-list').hide();
});
jQuery('#dropped-files #upload-button .delete').click(restartFiles);
// Append the localstorage the the uploaded files section
/*if(window.localStorage.length > 0) {
jQuery('#uploaded-files').show();
for (var t = 0; t < window.localStorage.length; t++) {
var key = window.localStorage.key(t);
var value = window.localStorage[key];
// Append the list items
if(value != undefined || value != '') {
jQuery('#uploaded-files').append(value);
}
}
} else {
jQuery('#uploaded-files').hide();
}*/
});
wp_fileuploads.php
<?php
// We're putting all our files in a directory called images.
$uploaddir = 'images/';
// The posted data, for reference
$file = $_POST['value'];
$name = $_POST['name'];
// Get the mime
$getMime = explode('.', $name);
$mime = end($getMime);
// Separate out the data
$data = explode(',', $file);
// Encode it correctly
$encodedData = str_replace(' ','+',$data[1]);
$decodedData = base64_decode($encodedData);
// You can use the name given, or create a random name.
// We will create a random name!
$randomName = substr_replace(sha1(microtime(true)), '', 12).'.'.$mime;
if(file_put_contents($uploaddir.$randomName, $decodedData)) {
echo $randomName.":uploaded successfully";
}
else {
// Show an error message should something go wrong.
echo "Something went wrong. Check that the file isn't corrupted";
}
?>
CSSの設定
#drop-files {
width: 100px;
height: 55px;
background: rgba(0,0,0,0.1);
border-radius: 10px;
border: 4px dashed rgba(0,0,0,0.2);
padding: 75px 0 0 0;
text-align: center;
font-size: 2em;
float: left;
font-weight: bold;
margin: 0 20px 20px 0;
}
#dropped-files {
float: left;
position: relative;
width: 560px;
height: 125px;
}
#upload-button {
position: absolute;
top: 87px;
z-index: 9999;
width: 210px;
display: none;
}
#dropped-files .image {
height: 100px;
width: 200px;
border: 4px solid #fff;
position: absolute;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
background: #fff;
border-radius: 4px;
overflow: hidden;
}
#upload-button .ss-upload {
font-size: 0.7em;
}
#upload-button a {
text-decoration: none;
color: #fff;
font-weight: bold;
box-shadow: 0 0 1000px 62px rgba(255, 255, 255, 1), inset 0 -35px 40px -10px #0A9FCA;
font-size: 20px;
padding: 10px 20px;
background-color: #4bc1e3;
border-radius: 10px;
}
#upload-button span {
display: block;
width: 160px;
text-align: center;
margin: 20px 0 0 0;
background: white;
border-radius: 10px;
font-size: 1.1em;
padding: 4px 0;
position: relative;
left: -14px;
}
#upload-button a:hover {
box-shadow: 0 0 1000px 62px rgba(255, 255, 255, 1), inset 0 -5px 40px 0px #0A9FCA;
}
#extra-files {
display: none;
float: left;
position: relative;
}
#extra-files .number {
background: rgba(0,0,0,0.6);
border-radius: 4px;
display: inline-block;
position: relative;
font-weight: bold;
color: #fff;
padding: 20px 30px;
margin: 60px 0 0 0;
cursor: pointer;
font-size: 30px;
}
#dropped-files #upload-button .delete {
padding: 7px 6px 4px 6px;
border-radius: 100px;
background: rgba(0,0,0,0.6);
box-shadow: none;
font-size: 1em;
margin-left: 8px;
}
#dropped-files #upload-button .delete:hover {
background: rgba(0,0,0,0.8);
}
#extra-files .number:after {
position: absolute;
content: " ";
top: 18px;
left: -40px;
display: block;
border: 20px solid;
border-color: transparent rgba(0, 0, 0, 0.6) transparent transparent;
}
#extra-files #file-list {
display: none;
background: white;
padding: 20px 0;
border-radius: 5px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
width: 250px;
top: 100px;
border: 1px solid #dadada;
left: -10px;
left: -16px;
max-height: 220px;
top: 150px;
position: absolute;
color: #545454;
}
#file-list ul {
overflow: scroll;
padding: 0;
border-top: 1px solid #dadada;
max-height: 200px;
width: 250px;
list-style: none;
border-bottom: 1px solid #dadada !important;
}
#file-list ul li:last-of-type {
border-bottom: 0 !important;
}
#uploaded-holder {
width: 700px;
height: 250px;
display: none;
float: left;
}
#extra-files #file-list:after, #extra-files #file-list:before {
position: absolute;
content: " ";
top: -40px;
left: 40px;
display: block;
border: 20px solid;
border-color: transparent transparent #ffffff transparent;
}
#extra-files #file-list:before {
border-color: transparent transparent #dadada transparent;
top: -41px;
}
#extra-files #file-list li {
border-bottom: 1px solid #eee;
font-weight: bold;
font-size: 1.5em;
padding: 10px;
}
#loading {
display: none;
float: left;
width: 100%;
position: relative;
}
#loading-bar {
width: 404px;
height: 40px;
background: #fff;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
border-radius: 5px;
padding: 2px;
}
.loading-color {
width: 0%;
height: 100%;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-ms-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
border-radius: inherit;
background-color: #4edbf1;
}
#loading-content {
position: absolute;
top: 15px;
font-size: 1.2em;
font-weight: bold;
text-align: center;
width: 405px;
}
#file-name-holder {
width: 100%;
float: left;
}
#file-name-holder h1 {
text-align: center;
border-bottom: 1px solid #dadada;
padding: 20px 0;
font-size: 3em;
margin: 0;
}
#uploaded-files {
background: white;
border-radius: 5px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
width: 407px;
top: 100px;
padding: 0;
border: 1px solid #dadada;
max-height: 320px;
overflow: scroll;
color: #545454;
}
#uploaded-files li {
padding: 10px;
border-bottom: 1px solid #eee;
font-size: 1.5em;
font-weight: bold;
line-height: 25px;
color: #545454;
}
#uploaded-files a {
color: #1bacbf;
}
サーバ全体の文字コードがEUCでそれをhtaccessにて強引に文字コードを代えている。
その設定をしていた初期にWPをいれてたディレクトリは日本語URLが認識され表示されていたが
トップディレクトリには文字コードを変更する設定をいれていないために日本語URLなどが認識されないために通常とはことなる挙動を行った。
私が手動でカスタム投稿を設定した際は投稿タイトルを半角英数で入力したためにちゃんと表示された。
なんという落とし穴。
サーバの文字コードは大事ね。
function get_ordered_terms( $id = 0, $orderby = 'slug', $order = 'ASC', $taxonomy = 'category' ) {
$terms = get_the_terms( $id, $taxonomy );
if ( $terms ) {
$ordered = array();
foreach ( $terms as $term ) {
if ( isset( $term->$orderby ) ) {
$ordered[$term->$orderby] = $term;
}
}
if ( strtoupper( $order ) == 'DESC' ) {
$func = 'krsort';
} else {
$func = 'ksort';
}
$func( $ordered );
return $ordered;
print_r($ordered);
}
}
function custom_the_category() {
$categories = get_ordered_terms();
foreach($categories as $category){
$url = get_category_link($category->term_id);
$name = $category->name;
echo "<a href='".$url."'>".$name."</a> ";
}
}
一度設定しちゃったcustom_the_category()が動かなくなったので強引な手段として・・・・。
記事が属しているカテゴリーを取得し、slugなどで並び替えて表示するってコードをかいていたけどいつの間にか動かなくなっていたので再度設置。
テンプレートのファンクションを変えるのは怖かったのでfuncitons.phpの記述を変更して対応。
http://kachibito.net/wordpress/admin-area-customize.html
納品時に考えておきたい作業の一覧
なるほどなるほど
WPのタクソノミーでnameと使うとタクソノミアーカイブが表示されないというとんでもないドツボ。
タクソノミーの名前を
diet_name
と変更すると表示されるようになった。
なんでも名前を付けてOKというわけでないないみたいだ。
文字数は20文字なのはしっていたがこれはどこにも載ってなかった情報だから
きちんとした確認ができているわけではないが注意する必要がありそう。
WP。
テンプレートタグを知ってレベル1
プラグインを利用してレベル2
プラグインだけで満足せずPHPタグを利用してレベル3
管理画面が気に入らなくなりレベル4
管理画面のデザインや情報制御までに手を出す末期レベル5
プラグイン化しようとするとレベル6
そろそろ管理画面を作り替えたい。そんな感じ。
privateではなく公開されているのでpublishに該当するという現実。
post_passwordとして配列の中にある。