デコマガジン

【MovableType覚書】検索と出力

【MovableType覚書】検索と出力画像


コンテンツタイプ

＞　公式ページマニュアル

検索ボックス

<mt:Ignore><!-- コンテンツデータ内検索 --></mt:Ignore>

<h3 class="title-42">検索</h3>
<div class="jisseki-sub-box1">
<form method="get" id="search" action="<$mt:CGIPath$><$mt:ContentDataSearchScript$>" class="googleform3">
<input type="text" id="search" class="googlesbox3" name="search" value="<MTIfStatic><mt:IfStraightSearch>
<$mt:SearchString$></mt:IfStraightSearch></MTIfStatic>" size="31" placeholder="キーワードを検索">
<mt:If name="search_results">
<input type="hidden" name="IncludeBlogs" value="<$mt:SearchIncludeBlogs$>">
<input type="hidden" name="blog_id" value="<$mt:SiteID$>">
<input type="hidden" name="SearchContentTypes" value="お知らせ">
<mt:Else>
<input type="hidden" name="IncludeBlogs" value="<$mt:SiteID$>">
<input type="hidden" name="blog_id" value="<$mt:SiteID$>">
<input type="hidden" name="SearchContentTypes" value="お知らせ">
</mt:If>
<input type="hidden" name="limit" value="<$mt:SearchMaxResults$>" />
<button type="submit" name="sa" value=" " class="googlesbtn3"><i class="fas fa-search"></i></button>
</form>
</div>

.googleform3{
 position:relative;
 width: 100%!important; 
 margin:0 auto 20px auto;
 height: 50px;
}
.googlesbox3{
 position:absolute;
 width: 100%!important;
 height:50px!important;
 padding: 0px 70px 0px 30px!important;
 left:0;
 top:0; 
 border-radius:50px;
 border:none;
 outline:0;
 background:#eee;
 box-sizing: border-box!important;
}
.googlesbtn3{
 height:50px;
 position:absolute; 
 right:10px;/*アイコン左右の位置調整*/
 top:0px;
 background:none;
 color:#666;
 border:none;
 font-size:20px;/*アイコンサイズ*/
}
.googlesbtn3:hover{
 color:#7fbfff;
}

検索結果

<!doctype html>
<html lang="ja" dir="ltr" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

<head></head>

<body id="page_top">

<script>
<mt:IfMoreResults>
 function getResults(page) {
 page = parseInt(page);
 if (timer) window.clearTimeout(timer);
 var xh = mtGetXmlHttp();
 if (!xh) return false;
 var res = results[page];
 if (!res) return;
 var url = res['next_url'];
 if (!url) return;

xh.open('GET', url + '&format=js', true);
 xh.onreadystatechange = function() {
 if ( xh.readyState == 4 ) {
 if ( xh.status && ( xh.status != 200 ) ) {
 // error - ignore
 } else {
 try {
 var page_results = eval("(" + xh.responseText + ")");
 if ( page_results['error'] == null )
 results[page + 1] = page_results['result'];
 } catch (e) {
 }
 }
 }
 };
 xh.send(null);
 }

function swapContent(direction) {
 if ( direction == undefined ) direction = 1;
 var page_span = document.getElementById('current-page');
 if (!page_span) return true;
 var next_page = direction + parseInt(page_span.innerHTML);
 var res = results[next_page];
 if (!res) return true;
 var content = res['content'];
 if (!content) return true;
 var div = document.getElementById('search-results-main');
 if (!div) return true;
 div.innerHTML = content;
 timer = window.setTimeout("getResults(" + next_page + ")", 1*1000);
 window.scroll(0, 0);
 return false;
 }
<mt:Else>
 <mt:IfPreviousResults>
 function swapContent(direction) {
 return true;
 }
 </mt:IfPreviousResults>
</mt:IfMoreResults>

<section class="wrapT100">
 <div class="inner1600w88">
 
 <div class="ttl-c1">
 <div class="ttl-c1-mark"><img src="/images2/mark/mark003b.svg" alt="お知らせ"/></div>
 <h2 class="ttl-c1-ttl">お知らせ検索結果</h2>
 <div class="ttl-c1-subttl">SERCH</div>
 </div>
 
 </div>
 </section>
 
 <div class="wrapstd">
 <div class="inner-box-jisseki inner1600">
<mt:SetVarTemplate id="cd_search_results" name="cd_search_results">
<mt:SearchResults>
<mt:SearchResultsHeader>
<section class="jisseki-list">
<ul class="newsline2wraptopline">
</mt:SearchResultsHeader>
<li class="newsline2wrap"><a href="<mt:ContentPermalink>">
<div class="newsline2">
<div class="newsline2box">
<div class="newsline2date"><mt:ContentDate format="%Y年%m月%d日"></div>
<mt:ContentField content_field="カテゴリ"><div class="newsline2cat <mt:CategoryBasename>">
<mt:CategoryLabel></div></mt:ContentField>
<p class="newsline2title"><mt:ContentField content_field="タイトル"><mt:ContentFieldValue></mt:ContentField>
 <i class="fas fa-chevron-circle-right"></i></p>
</div>
<figure class="newsline2img" style="background-image: url('<mt:ContentField content_field="一覧用画像">
<mt:AssetThumbnailURL width='300'><mt:Else><mt:ContentField content_field="本文">
<mt:Assets type='image' limit='1' sort_order='ascend'><$mt:AssetThumbnailURL width='300'$></mt:Assets>
</mt:ContentField></mt:ContentField>'); background-size: cover;">
<img src="/images2/listimgtrans1.png" alt="<mt:ContentField content_field="タイトル"><mt:ContentFieldValue></mt:ContentField>"/>
</figure>
</div>
<p class="newsline2title2"><mt:ContentField content_field="タイトル"><mt:ContentFieldValue></mt:ContentField>
 <i class="fas fa-chevron-circle-right"></i></p>
</a></li>
<mt:SearchResultsFooter>
</ul>
<div class="mT80-50"><div class="pagenate"><ul>
<mt:IfMoreResults>
<li><a rel="prev" href="<$mt:NextLink encode_html="1"$>" onclick="return swapContent();">過去のコンテンツ</a></li>
</mt:IfMoreResults>
<mt:IfPreviousResults>
<li><a rel="next" href="<$mt:PreviousLink encode_html="1"$>" onclick="return swapContent(-1);">新しいコンテンツ</a></li>
</mt:IfPreviousResults>
</ul></div></div>
</section>
</mt:SearchResultsFooter>
</mt:SearchResults>
</mt:SetVarTemplate>

<$mt:Var name="cd_search_results"$>

<mt:NoSearchResults>
 <section>
 <h1 class="search-results-header">
 <MTIfStatic><mt:IfStraightSearch>
 「<$mt:SearchString$>」と一致するもの
 </mt:IfStraightSearch></MTIfStatic>
 <mt:IfTagSearch>
 タグ「<$mt:SearchString$>」が付けられているもの
 </mt:IfTagSearch>
 </h1>
 <p>「<$mt:SearchString$>」と一致する結果は見つかりませんでした。</p>
 </section>
</mt:NoSearchResults>

<mt:NoSearch>
 <section>
 <h1 class="search-results-header">例</h1>
 <p>すべての単語が順序に関係なく検索されます。フレーズで検索したいときは引用符で囲んでください。</p>
 <pre><code>"movable type"</code></pre>
 <p>AND、OR、NOTを入れることで論理検索を行うこともできます。</p>
 <pre><code>個人 OR 出版</code></pre>
 <pre><code>個人 NOT 出版</code></pre>
 </section>
</mt:NoSearch>

<mt:Ignore><!-- Used with the ajax search capability of the new search class --></mt:Ignore>
<mt:IfMoreResults>
 <script type="text/javascript">
 var div = document.getElementById('search-results');
 var results = {
 '<$mt:CurrentPage$>': {
 'content': div.innerHTML,
 'next_url': '<$mt:NextLink$>'
 }
 };
 var timer = window.setTimeout("getResults(" + <$mt:CurrentPage$> + ")", 1*1000);
 </script>
</mt:IfMoreResults>

</body>
</html>

記事等

検索ボックス

<mt:Ignore><!-- サイト用サイト内検索 --></mt:Ignore>

<form method="get" action="<$mt:CGIPath$><$mt:SearchScript$>" class="googleform2">
<input type="text" id="search" class="googlesbox2" name="search" value="<MTIfStatic><mt:IfStraightSearch>
<$mt:SearchString$></mt:IfStraightSearch></MTIfStatic>" size="31" placeholder="キーワードを検索" />
<input type="hidden" name="IncludeBlogs" value="2,3" />
<input type="hidden" name="limit" value="<$mt:SearchMaxResults$>" />
<button type="submit" name="sa" value=" " class="googlesbtn2"><i class="fas fa-search"></i></button>
</form>

検索結果

<!doctype html>
<html lang="ja" dir="ltr" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>

<script type="text/javascript">
 /* <![CDATA[ */
 var user = <$mt:UserSessionState$>;
 /* ]]> */
 </script>

<title><$mt:BlogName encode_html="1"$>: 検索結果</title>
 <mt:Ignore>Below Javascript adds ajax search capability</mt:Ignore>
 <script type="text/javascript">
 /* <![CDATA[ */
 <mt:IfMoreResults>
 function getResults(page) {
 page = parseInt(page);
 if (timer) window.clearTimeout(timer);
 var xh = mtGetXmlHttp();
 if (!xh) return false;
 var res = results[page];
 if (!res) return;
 var url = res['next_url'];
 if (!url) return;

xh.open('GET', url + '&format=js', true);
 xh.onreadystatechange = function() {
 if ( xh.readyState == 4 ) {
 if ( xh.status && ( xh.status != 200 ) ) {
 // error - ignore
 } else {
 try {
 var page_results = eval("(" + xh.responseText + ")");
 if ( page_results['error'] == null )
 results[page + 1] = page_results['result'];
 } catch (e) {
 }
 }
 }
 };
 xh.send(null);
 }

function swapContent(direction) {
 if ( direction == undefined ) direction = 1;
 var page_span = document.getElementById('current-page');
 if (!page_span) return true;
 var next_page = direction + parseInt(page_span.innerHTML);
 var res = results[next_page];
 if (!res) return true;
 var content = res['content'];
 if (!content) return true;
 var div = document.getElementById('search-results');
 if (!div) return true;
 div.innerHTML = content;
 timer = window.setTimeout("getResults(" + next_page + ")", 1*1000);
 window.scroll(0, 0);
 return false;
 }
 <mt:Else><mt:IfPreviousResults>
 function swapContent(direction) {
 return true;
 }</mt:IfPreviousResults>
 </mt:IfMoreResults>
 /* ]]> */
 </script>

 
</head>
<body>

 
 <div class="ttl-c1">
 <div class="ttl-c1-mark"><img src="/images2/mark/mark003b.svg" alt="検索"/></div>
 <h2 class="ttl-c1-ttl">検索<MTIfStatic><mt:IfStraightSearch>「<$mt:SearchString$>」</mt:IfStraightSearch></MTIfStatic>
 <mt:IfTagSearch>タグ「<$mt:SearchString$>」</mt:IfTagSearch></h2>
 <div class="ttl-c1-subttl">SEARCH</div>
 </div>

<mt:Ignore><!-- 検索結果表示（結果がある場合） --></mt:Ignore>

<mt:SearchResults>
<mt:SearchResultsHeader><ul></mt:SearchResultsHeader>

<li class="searchline" id="entry-<$mt:EntryID$>">
<p class="searchlinetitle"><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></p>
<p class="searchlineex"><$mt:EntryExcerpt words="100"$></p>
</li>
 
<mt:SearchResultsFooter></ul>
<div class="mT80-50">
<div class="pagenate">
<ul>
<mt:IfMoreResults><li><a rel="prev" href="<$mt:NextLink encode_html="1"$>" onclick="return swapContent();">
<i class="fas fa-angle-double-left"></i> PREVIOUS</a></li></mt:IfMoreResults>
<mt:IfPreviousResults><li><a rel="next" href="<$mt:PreviousLink encode_html="1"$>" onclick="return swapContent(-1);">
<i class="fas fa-angle-double-right"></i> NEW</a></li></mt:IfPreviousResults>
</ul>
</div>
</div>
</mt:SearchResultsFooter>
 
</mt:SearchResults>

 <mt:Ignore><!-- 検索結果表示（結果がない場合） --></mt:Ignore>
<mt:NoSearchResults>
<p class="mT80-40 mB80-50">一致する検索結果は見つかりませんでした。</p>
</mt:NoSearchResults>

 <mt:Ignore><!-- 検索結果表示（何もキーワードを入力せずに検索された場合） --></mt:Ignore>
<mt:NoSearch>
<p class="mT80-40 mB80-50">検索する内容を入れてください。</p>
</mt:NoSearch>


<mt:Ignore><!-- Used with the ajax search capability of the new search class --></mt:Ignore>
<mt:IfMoreResults>
<script type="text/javascript">
<!--
var div = document.getElementById('search-results');
var results = {
 '<$mt:CurrentPage$>': {
 'content': div.innerHTML,
 'next_url': '<$mt:NextLink$>'
 }
};
var timer = window.setTimeout("getResults(" + <$mt:CurrentPage$> + ")", 1*1000);
//-->
</script>
</mt:IfMoreResults>

</body>

</html>

記事一覧


ホームページ制作
について

デコジャパンの
サービス内容

ホームページの
実績紹介

デコマガジン
ＨＰ＆ＰＣ