ホームページ  >  記事  >  CMS チュートリアル  >  WordPress サイトを模倣する方法

WordPress サイトを模倣する方法

尚
オリジナル
2019-07-12 17:16:4313413ブラウズ

WordPress サイトを模倣する方法

WordPress 模倣サイト:

1. ターゲット Web サイトをキャプチャするには、模倣サイト ガジェット 8.0.2 を使用するのが非常に簡単です。可能な限りサイト全体を参照し、Web サイトをクロールします。

WordPress サイトを模倣する方法

ファイルを wp-content/tust に保存します。保存されたホームページのdefault.htmlとその他のファイルディレクトリは次のとおりです。

WordPress サイトを模倣する方法

次に、標準のwpファイルを作成します。以下の図に示すように:

WordPress サイトを模倣する方法

default.html を header.php、index.php、footer.php

header.php に本文ナビゲーションを含めて分割します。バー、変更されたコードは後で投稿されます。

index.php にはメイン部分が含まれており、header.php と footer.php を参照する必要があります。

footer.php には、最終的な著作権およびその他の情報が含まれています。

2. header.php 内のリンクを変更して、ホームページを通常のものにします。よく使われるテンプレート関数:

基本条件判定関数:

is_home():ホームページかどうか

is_single():コンテンツページかどうか(投稿)

is_page(): コンテンツ ページ (ページ) かどうか

is_category(): カテゴリ/アーカイブ ページかどうか

is_tag(): かどうかはタグ (Tag) archive page

is_date(): 指定した日付のページをアーカイブするかどうか

is_year(): 指定した年のページをアーカイブするかどうか

is_month(): 指定した月のページをアーカイブするかどうか

is_day(): 指定した日のアーカイブページかどうか

##is_time(): アーカイブかどうか指定した時間のページ

is_archive(): アーカイブページかどうか

is_search(): 検索結果ページかどうか

is_404(): アーカイブページかどうかは「HTTP 404: Not Found」エラー ページです。

is_paged(): ホームページ/カテゴリ/アーカイブ ページが複数のページで表示されるかどうか

ヘッダー部分で一般的に使用される PHP 関数:

: ブログ名 (タイトル)

: CSS ファイルのパス

:PingBack URL

: テンプレート ファイルのパス

: WordPress のバージョン

:Atom URL

:RSS 2.o URL

: ブログ URL

php bloginfo('html_type'); ?>: ブログページのHTMLタイプ

:ブログページのエンコーディング

:ブログの説明

:特定のコンテンツページ(Post /Page)title

よく使われるPHP関数およびテンプレートのコマンド:

: ヘッダー テンプレートを呼び出します

: サイドバー テンプレートを呼び出します

: フッター テンプレートを呼び出します

#: コンテンツを表示します (投稿/ページ)

: 投稿/ページが存在するかどうかを確認します

: 投稿/ページの場合ページが存在する場合は表示します

:end

:end

: 表示時刻。時刻の形式は「string」パラメータによって決まります。PHP マニュアルを参照してください。

php comments_popup_link(); ?>:テキスト内のコメントリンク、comments_popup_script(); を使用すると、リンクは新しいウィンドウで開きます

: コンテンツページ (Post/Page ) Title

: コンテンツ ページ (Post/Page) URL

: 特定のコンテンツ ページ (Post/ページ) カテゴリ

: 著者

: 特定のコンテンツ ページ (投稿/ページ) ID

: ユーザーがログインしていて権限がある場合、編集リンクを表示します

: 表示しますブログロール内のリンク

: メッセージ/返信テンプレートを呼び出す

: ページリストを表示

: カテゴリリストを表示

: 次の記事リンク

:前の記事リンク

:カレンダー

< ;?php wp_get_archives( ) ?>:コンテンツアーカイブを表示

: ナビゲーション、前/次の記事リンクを表示します

#テンプレートに関連するその他の関数:

: 対応する情報を出力

: 登録リンクを表示

#: ログイン/ログアウトリンクを表示

#: 現在のコンテンツをページングします

: コンテンツ全体がホームページ/カタログ ページに表示されないように現在のコンテンツを切り詰めます

: Web ページの読み込み時間 (秒)

: Web ページの読み込みクエリ量

will テンプレート内の css、js、画像のリンクを上記の関数に置き換えます

3. ページが正常に表示されたら、ナビゲーション バーを修正します。

ナビゲーション バーを設定するときは、元のコードを変更します:

代わりに wp_nav_menu を使用します。メニュー ナビゲーション コードは、以下のコメントに示されているとおりです。メニューは次のとおりです。注釈付き。置換する場合は以下のパラメータに従ってください。 WordPress サイトを模倣する方法

<?php wp_nav_menu(  
array(  
&#39;theme_location&#39;  => &#39;&#39; //指定显示的导航名,如果没有设置,则显示第一个  
&#39;menu&#39;            => &#39;header-menu&#39;,  
&#39;container&#39;       => &#39;nav&#39;, //最外层容器标签名  
&#39;container_class&#39; => &#39;primary&#39;, //最外层容器class名  
&#39;container_id&#39;    => &#39;&#39;,//最外层容器id值  
&#39;menu_class&#39;      => &#39;sf-menu&#39;, //ul标签class  
&#39;menu_id&#39;         => &#39;topnav&#39;,//ul标签id  
&#39;echo&#39;            => true,//是否打印,默认是true,如果想将导航的代码作为赋值使用,可设置为false  
&#39;fallback_cb&#39;     => &#39;wp_page_menu&#39;,//备用的导航菜单函数,用于没有在后台设置导航时调用  
&#39;before&#39;          => &#39;&#39;,//显示在导航a标签之前  
&#39;after&#39;           => &#39;&#39;,//显示在导航a标签之后  
&#39;link_before&#39;     => &#39;&#39;,//显示在导航链接名之后  
&#39;link_after&#39;      => &#39;&#39;,//显示在导航链接名之前  
&#39;items_wrap&#39;      => &#39;<ul id="%1$s">%3$s</ul>&#39;,  
&#39;depth&#39;           => 0,////显示的菜单层数,默认0,0是显示所有层  
&#39;walker&#39;          => &#39;&#39;// //调用一个对象定义显示导航菜单 ));   
?>

ホームページの header.php の修正が完了すると、おおよそ次のようになります:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo(&#39;charset&#39;); ?>" />
	<title>天津科技大学海洋与环境学院</title>
	<meta name="keywords" content="天津科技大学海洋与环境学院" />
	<meta name="description" content="<?php bloginfo(&#39;description&#39;); ?>" />
	<link rel="shortcut icon" type="image/ico" href="<?php echo get_option(&#39; wpd_logo &#39;); ?>" />
<link href="<?php bloginfo(&#39;template_url&#39;); ?>/css/reset-min.css" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo(&#39;template_url&#39;); ?>/css/fonts-min.css" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo(&#39;template_url&#39;); ?>/css/grids-min.css" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo(&#39;template_url&#39;); ?>/css/common.css" rel="stylesheet" type="text/css" />
<script src="<?php bloginfo(&#39;template_url&#39;); ?>/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<script src="js/ie7.js"></script>
<![endif]-->
<script type="text/javascript" src="js/iepngfix_tilebg.js"></script>
<link href="<?php bloginfo(&#39;template_url&#39;); ?>/css/index.css" rel="stylesheet" type="text/css" />
	<link href="<?php bloginfo(&#39;template_url&#39;); ?>/css/frame-top-link.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="<?php bloginfo(&#39;template_url&#39;); ?>/css/mainmenu.css" />
	<link href="<?php bloginfo(&#39;template_url&#39;); ?>/css/jqueryslidemenu.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="<?php bloginfo(&#39;template_url&#39;); ?>/css/bigpic.css" />
	<link rel="stylesheet" type="text/css" href="<?php bloginfo(&#39;template_url&#39;); ?>/css/modulelist.css" />
	<link rel="stylesheet" type="text/css" href="<?php bloginfo(&#39;template_url&#39;); ?>/css/pager.css" />
	<script src="<?php bloginfo(&#39;template_url&#39;); ?>/js/jquery.slidemenu.js" type="text/javascript"></script>
	<script type="text/javascript" src="<?php bloginfo(&#39;template_url&#39;); ?>/js/xmosaic.js"></script>
	<script src="<?php bloginfo(&#39;template_url&#39;); ?>/js/jquery.js" type="text/javascript"></script>
	<script src="<?php bloginfo(&#39;template_url&#39;); ?>/js/kandytabs.pack.js" type="text/javascript"></script>
	<script src="<?php bloginfo(&#39;template_url&#39;); ?>/js/custom.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo(&#39;template_url&#39;); ?>/css/footer.css" />
<style>
.tag_description
{
    float: left;
    margin-top:7px;
      padding-bottom:5px;
	  list-style:none;
}
 
    .tag_description a
    {
 
        font-size: 12px;
        text-indent: 24px;
    }
 
    .tag_description p
    {
	font-family:"宋体",Verdana, Lucida, Arial, Helvetica;
		color: #666666;
		float:right;
		width:220px;
		line-height:24px;
        font-size: 12px;
        text-indent: 24px;
        text-align:justify; 
		margin-top:0px;
        text-justify:inter-ideograph;
 
    }
				    #AcadeInfoList
				    {
				        position:relative;
				        top:-20px;
				    }
				    #AcadeInfo_spliter
				    {
				         position:relative;
				        top:10px;
				    }
				    
				    #AcadeInfoList:nth-of-type(n)
				    {
				        position:relative;
				        top:0px;
				    }
				    #AcadeInfo_spliter:nth-of-type(n)
				    {
				         position:relative;
				        top:30px;
				    }
.tag_title{
	line-height:24px;
            background-position-x: 0%;
            background-position-y: -540px;
            background-repeat: no-repeat;
	    overflow-x: hidden;
	width:370px;
}
.tag_title a{color: #666666; font-size:12px; margin-left:0px; padding-left:5px; }
 
</style>
</head>
<body>
<div id="frame-top">
	<div id="frame-top-warpper">
		<div class="frame-top-link">
		
	<ul>
		<li class="first"><a target="" href="/">学院首页</a></li><li class=""><a target="" href="/7db3dc.html">联系我们</a></li><li class=""><a target="_blank" href="/admin.html">管理员入口</a></li>	</ul>
</div>
<div id="frame-top-logo">
	<table>
		<tr>
			<td  style="vertical-align:top">
				<a href="/" title="天津科技大学海洋与环境学院">
					<img  src="<?php bloginfo(&#39;template_url&#39;); ? alt="WordPress サイトを模倣する方法" >/picture/2015-09-16-19-7642419411.png" />
				</a>
			</td>
		</tr>
	</table>
</div>
<div id="frame-top-navbar">
	<script type="text/javascript">
	    $(document).ready(function () {
	        mlddminit(375);
	    });
	</script>
	
	
		<div id="navbar-left"></div>
		<?php wp_nav_menu( array( &#39;container&#39; => &#39;div&#39;,&#39;container_id&#39; => &#39;navbar-middle&#39;,&#39;menu_class&#39; => &#39;mlddm&#39;) ); ?>
	
		<!--<ul class="mlddm" params="1,-1,500,slide,200,h">
			<li class="">
	<a href="#" target="">学院概况</a>
	<ul>
		<li><a href=&#39;/01589e.html&#39; target="">学院简介</a>
		        </li><li><a href=&#39;/cbc95b.html&#39; target="">历史沿革</a>
		        </li><li><a href=&#39;/1ab539.html&#39; target="">学院领导</a>
		        </li><li><a href=&#39;/ad9daf.html&#39; target="">学院党委</a>
		        </li><li><a href=&#39;/0c2b70.html&#39; target="">职能部门</a>
		        </li><li><a href=&#39;#&#39; target="">学术机构</a>
	
		  </li>    替换这里第一条的东西。	
	-->
	
	<div id="navbar-right"></div>
</div>
<?php wp_head(); ?>

4.index.php の

を修正します。まずカルーセル画像を変更します。カルーセル画像の変更コードは次のとおりです:

<?php get_header(); ?>
<div id="frame-top-slider-detail"> </div>
		<div id="frame-top-slider" class="smallslider">
			<!-- 大图轮播-->
			<script type="text/javascript">
		        $(document).ready(function () {
					var l=$(&#39;#bigpic&#39;).children().length;
					var str=&#39;&#39;;
					for(var i=0; i < l;i++)
					{
						if(i==0)
							str += &#39;<li  class="on" ></li>&#39;;
						else
							str += &#39;<li class=" "></li>&#39;;
					}
					$(&#39;#pager&#39;).html(str);
		            var mosaic = XMosaic(&#39;bigpic&#39;, { pager: &#39;pager&#39;, delay: 10000, countX: 10, countY: 5, how: 9, order: 0 });
		        });
		    </script>
			<div  id ="bigpic">
			<a style="left: 0px; top: 0px; position: absolute;" target="_blank" href="/13v0to-1.html">
	<img  src=&#39;<?php echo get_option(&#39; wpd_banner1 &#39;); ? alt="WordPress サイトを模倣する方法" >&#39; alt=&#39;1&#39; />
</a><a style="left: 0px; top: 0px; position: absolute;" target="_blank" href="">
	<img  src=&#39;<?php echo get_option(&#39; wpd_banner2 &#39;); ? alt="WordPress サイトを模倣する方法" >&#39; alt=&#39;2&#39; />
</a>			</div>
		</div>
	</div>

次に、記事のリスト部分を変更します:

	<div id="frame-top-slider-mask">
		<ul class="ctrls" id="pager">
		</ul>
	</div>
</div>
<div id="frame-main-body">
	<div id="frame-main-wrapper" class="yui3-g">
		<div id="frame-main" class="yui3-u">
			<div id="frame-main-left" class="yui3-u-1-2">
				<div class="module module_left">
					<div class="module-name">
					<a href="/75d14e-1.html" target="_blank">学院新闻</a>
					<a style="font-size:13px; margin-left:250px; color:blue;" target="_blank" href="/75d14e-1.html">更多</a>
					</div>
					<div class="module-spliter">
						<div> </div>
					</div>
					<div class="module-warpper">
						<div>
	<div class="row pd5 fb">
		<a target="_blank" title="海洋与环境学院孙军院长一行走访国家海洋信息中心" href="/lqpmfv.html">海洋与环境学院孙军院长一行走访国家海洋信息中心</a>
	</div>
	<li class="row spic tag_description">
		<a target="_blank" href="/lqpmfv.html" title="海洋与环境学院孙军院长一行走访国家海洋信息中心">
			<img width=360    style="max-width:90%" align="left" alt="海洋与环境学院孙军院长一行走访国家海洋信息中心" src="<?php bloginfo(&#39;template_url&#39;); ?>/picture/540_225.jpg">
					</a>
	</li>
	<div style="clear:both;"></div>
</div>						<table cellspacing="0" cellpadding="0" class="tag_table">
	<tbody>
		
        <?php
			query_posts(
				//&#39;query_type = post&posts_per_page=8&#39;
				array ( &#39;category_name&#39; => &#39;business&#39;, &#39;posts_per_page&#39; => 8 )
				);
				$i=0; while(have_posts()) : the_post(); $i++; ?>
				<tr>
				<td width="100%">
					<ul>
						<li class="tag_title">
							<a target="_blank" title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
						</li>
					</ul>
				</td>
				</tr>				
			<?php endwhile; wp_reset_query(); ?>	
		
		</tbody>
</table>					</div>
				</div>
			</div>
			<div id="frame-main-right" class="yui3-u-1-2">
				<div class="module">
					<div class="module-name"> <a href="/c6c7e7-1.html" target="_blank">通知公告</a>
					<a style="font-size:13px; margin-left:250px; color:blue;" target="_blank" href="/c6c7e7-1.html">更多</a>
					</div>
					<div class="module-spliter">
						<div> </div>
					</div>
					<div class="module-warpper">
			<table cellspacing="0" cellpadding="0" class="tag_table">
	<tbody>
		
        <?php
		query_posts(
			//&#39;query_type = post&posts_per_page=8&#39;
			array ( &#39;category_name&#39; => &#39;technolo&#39;, &#39;posts_per_page&#39; => 8 )
			);
			$i=0; while(have_posts()) : the_post(); $i++; ?>			
				<tr>
					<td width="100%">
						<ul>
							<li class="tag_title">
								<a target="_blank" title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_time(&#39;Y年n月j日&#39;); ?>  <?php the_title(); ?></a>
							</li>
						</ul>
					</td>
				</tr>
		<?php endwhile; wp_reset_query(); ?>	
		
		</tbody>
</table>					</div>
				</div>
			</div>
		</div>
		<div id="frame-side" class="yui3-u">
			<div id="placehoder"></div>
			<ul>
				<li><a target="" href="/906368.html">研究成果</a></li><li><a target="" href="/faef50-1.html">学术交流</a></li><li><a target="_blank" href="http://hyxy.tust.edu.cn/shiyanshifan/1shoye.html">实践教学</a></li><li><a target="" href="/ccac59.html">教学成果</a></li><li><a target="" href="/4d3baa-1.html">学生资助</a></li><li><a target="" href="/801d37-1.html">校友相聚</a></li><li><a target="" href="#">学术报告</a></li>			</ul>
		</div>
	</div>
	<div id="frame-main-link" class="yui3-g">
		<div>
			<div id="demo" style="overflow:hidden;height:110px;margin:0 auto;">
				<table align="left" cellpadding="0" cellspace="0" border="0">
					<tr>
						<td id="demo1" valign="top">
						<div>
						<a style="width:0px;" href="/0c8a9f.html#ppzy" target="_blank"><img  src="<?php bloginfo(&#39;template_url&#39;); ? alt="WordPress サイトを模倣する方法" >/picture/57243dbb36ec49fe8ea8839a947fe310.jpg" /></a><img  src="<?php bloginfo(&#39;template_url&#39;); ? alt="WordPress サイトを模倣する方法" >/picture/869b86dfeae34a31b851fb01cec2b074.jpg" /><a   style="max-width:90%" href="http://hyhjbhjs.cl1.soochong.com" target="_blank"><img  src="<?php bloginfo(&#39;template_url&#39;); ? alt="WordPress サイトを模倣する方法" >/picture/2015-08-27-20-0606158108.jpg" /></a><img  src="<?php bloginfo(&#39;template_url&#39;); ? alt="WordPress サイトを模倣する方法" >/picture/39bfa2a5c9be4d87bb8c50a886d3f3c0.jpg" /></div>
						</td>
						<td id="demo2" valign="top"> </td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</div>
<?php get_footer(); ?>

その他の wordpress 関連の技術記事については、

wordpress チュートリアル

列にアクセスして学習してください。

以上がWordPress サイトを模倣する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。