博客-经典 (1 列)

WordPress如何手动更新

1、安全起见,完整备份WordPress。

2、去官网下载最新版的WordPress。

3、进FTP或主机管理后台删除根目录的wp-includes和wp-admin文件夹。

4、把解压在本地电脑的WordPress文件夹里除了wp-content文件夹外的所有文件都上传并覆盖到你博客主机相对应的位置。遇到是否覆盖时,选择全部覆盖。

5、运行http://你的博客地址/wp-admin/upgrade.php,执行升级。

turned_in

WordPress网站整体变灰色的代码和方法

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,国务院决定,2020 年 4 月 4 日举行全国性哀悼活动。在此期间,全国和驻外使领馆下半旗志哀,全国停止公共娱乐活动。4 月 4 日 10 时起,全国人民默哀 3 分钟,汽车、火车、舰船鸣笛,防空警报鸣响。

作为网站站长,我们也可以去掉网站的色彩,整体变成灰色,致敬英雄,以表哀思。

WordPress网站想要变灰方法非常简单,点击网站的自定义按钮。

然后在额外css里面填写下面这串代码,发布即可看到效果。不需要变灰后删除代码即可复原。

html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none}
turned_in

屏蔽无用的WordPress默认小工具

wordpress 开发侧边栏的时候,在后台会有很多原生的 WordPress 小工具,也就是默认的 Widget 有时候并不适合我们。所以为自己的 WordPress 主题自定义小工具是个非常明智的选择,这样一来我们需要屏蔽无用的 WordPress 默认小工具,这里分享一个可以把所有原生小工具的功能。

add_action('widgets_init', 'my_unregister_widgets');
function my_unregister_widgets() {
    unregister_widget('WP_Widget_Archives');
    unregister_widget('WP_Widget_Calendar');
    unregister_widget('WP_Widget_Categories');
    unregister_widget('WP_Widget_Links');
    unregister_widget('WP_Widget_Meta');
    unregister_widget('WP_Widget_Pages');
    unregister_widget('WP_Widget_Recent_Comments');
    unregister_widget('WP_Widget_Recent_Posts');
    unregister_widget('WP_Widget_RSS');
    unregister_widget('WP_Widget_Search');
    unregister_widget('WP_Widget_Tag_Cloud');
    unregister_widget('WP_Widget_Text');
    unregister_widget('WP_Nav_Menu_Widget');
    unregister_widget('WP_Widget_Media_Image');
    unregister_widget('WP_Widget_Media_Gallery');
    unregister_widget('WP_Widget_Media_Video');
    unregister_widget('WP_Widget_Media_Audio');
}

将上面面代码加到主题 functions 模版中即可,之前已启用的默认小工具将失效。

turned_in

短代码实现WordPress文章和页面运行PHP代码

我们再开发 wordpress 主题时,在 wordpress 主题的文章和页面中,php 代码是无法运行的,因为文章和页面是静态语言 HTML,不支持 php 代码运行。那么如果想在 wordpress 的文章中或页面中想要执行 php 代码,有没有方法能实现?因为在一些特殊情况,可能会要这么做。答案是肯定的。那么,wordpress 文章和页面怎样才能运行 php 代码呢?

想要在 wordpress 文章和页面中运行 php 代码,我们可以通过创建短代码来实现 。

比方说:我想在文章或页面显示当前用户的 IP 地址。这时,我们就要用到 php 代码,因为不同的用户, IP 是不一样的。用静态 html 语言是不可能实现的,所以,我们要用到 php 短代码。

首先:我们在 wordpress 主题的 functions.php 文件中添加 php 短代码:

function wpb_show_ip() {
$user_ip = $_SERVER['REMOTE_ADDR'];
return$user_ip;
}
add_shortcode('show_ip', 'wpb_show_ip');

然后,在发表文章的时候或创建页面的时候,在内容窗口添加如下短代码:

[show_ip]

这样,我们就可以在文章或页面中看到用户的 IP 地址了。wordpress 的 php 短代码,在很多的 wordpress 插件中也经常用到。如大名鼎鼎的支付宝购物车插件,就用到 wordpress 的 php 短代码,这主要是为了方便用户的使用,用户只需要在文章中添加“购物车”短码,就可以在文章页显示“购物车”按钮,让不懂代码的新手也可以轻松使用商城购物车。

turned_in

WordPress调用缩略图/特色图像url的方法

特色图像、缩略图是 wordpress 中一个不算复杂却十分难以理解的一个概念(至少我是这么认为的),特色图像的设置和调用是分两步来进行的,特色图像在 WordPress 中是属于日志缩略图的一种,即可以理解为默认缩略图的种类可分为 大、中、小和特色图像等缩略图,在后台默认的编辑器中,我们可以在文章中任意的调用大、中、小、等缩略图插入到文章,当然如果你愿意的话 WP 还可以插入原图。当主题的结构中支持将文章中的特色图像显示在文章概要或是文章索引中的时候,我们还可以在后台将喜欢的图像设置为特色图像。

可以用 the_post_thumbnail 函数 也可以用 get_the_post_thumbnail 函数,这样会直接输出带 img 的完整代码,有的时候并不是我们需要的,如果单纯的只需要图像的 URL,我们可以这样做。

调用缩略图的 URL:

<a href="<?php the_post_thumbnail_url( 'full' ); ?>"><?php the_post_thumbnail(); ?></a>

如果不加链接:

<?php if ( has_post_thumbnail() ) { ?>
<?php the_post_thumbnail(); ?>
<?php } else {?>
<img src="这里填写默认图片地址"/>
<?php } ?>

参数设置:

  1. the_post_thumbnail(); // 无参数,默认调用Thumbnail
  2. the_post_thumbnail(‘thumbnail’); // Thumbnail (默认尺寸 150px x 150px max)
  3. the_post_thumbnail(‘medium’); // Medium resolution (default 300px x 300px max)
  4. the_post_thumbnail(‘large’); // Large resolution (default 640px x 640px max)
  5. the_post_thumbnail(‘full’); // Full resolution (original size uploaded)
  6. the_post_thumbnail( array(100,100) ); // Other resolutions,自定义长宽

turned_in

详解CSS3实现响应式手风琴效果

最近看了国外大佬用CSS3实现手风琴效果的视频,所以自己学习后写了一下,以博客的形式记录下来,方便自己日后复习,代码结构如下(字体用的是Genericons ):

最终效果如下:

全屏时:

屏幕宽度小于960px时:

下面来看一下页面的基本结构(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
      <!--标题-->
    <header>
      <h1>Follow me on social media</h1>
    </header>
       
      <!--手风琴部分-->
    <ul class="accordion">
      <li class="tab">
        <div class="social youtube">
          <a href="#">YouTube</a>
        </div>
        <div class="content">
          <h1>YouTube</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </div>
      </li>
      <li class="tab">
        <div class="social facebook">
          <a href="#">Facebook</a>
        </div>
        <div class="content">
          <h1>Facebook</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </div>
      </li>
      <li class="tab">
        <div class="social twitter">
          <a href="#">Twitter</a>
        </div>
        <div class="content">
          <h1>Twitter</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </div>
      </li>
      <li class="tab">
        <div class="social instagram">
          <a href="#">Instagram</a>
        </div>
        <div class="content">
          <h1>Instagram</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </div>
      </li>
      <li class="tab">
        <div class="social linkedin">
          <a href="#">Linkedin</a>
        </div>
        <div class="content">
          <h1>Linkedin</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </div>
      </li>
       <li class="tab">
        <div class="social github">
          <a href="#">Github</a>
        </div>
        <div class="content">
          <h1>Github</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </div>
      </li>
    </ul>
  </div>
</body>
</html>

样式(style.css):

*{
  margin: 0;
  padding: 0;
  border: none;
}
 
body{
  font-family: Arial, Helvetica, sans-serif;
  background-color: #222;
  color: #fff;
}
 
/*设置字体,因为后面的图标需要用到*/
@font-face {
  font-family: 'Genericons';
  src: url('font/genericons-regular-webfont.woff') format('woff'),
  url('font/genericons-regular-webfont.eot') format('truetype');
}
 
/*设置外面容器的宽度*/
.container{
  width: 80%;
  margin: 20px auto;
}
 
header h1{
  font-size: 2rem;
  padding: 1rem;
  text-align: center;
}
 
/*注意这里font-size设置为0,不然会出现非常糟糕的画面,我们后面再去单独对需要现实的文本设置字体大小
,因为a链接不想让它显示内容*/
.accordion{
  width: 100%;
  min-width: 800px;
  height: 200px;
  background-color: #333;
  list-style: none;
  display: block;
  overflow: hidden;
  font-size: 0;
}
 
/*对每一个li设置为inline-block,让其排列在一行,溢出隐藏,因为.tab下面的.content宽度为360,而且.tab只有在hover的时候宽度才会变成450px,那时候.content刚好显示.另外设置过渡,使其宽度增长的过程平缓*/
.tab{
  width: 80px;
  height: 100%;
  display: inline-block;
  position: relative;
  margin: 0;
  background-color: #444;
  border: 1px solid #333;
  overflow: hidden;
  transition: all .5s ease .1s;
}
 
.tab:hover{
  width: 450px;
}
.tab:hover .social a:after{
  transform: translateX(-80px);
}
.tab:hover .social a:before{
  transform: translateX(-100px);
}
 
/*设置定位为相对定位,不然.content会有部分内容被遮住*/
.tab .content{
  position: relative;
  width: 360px;
  height: 100%;
  background-color: #fff;
  color: #333;
  margin-left: 80px;
  padding: 50px 0 0 15px;
}
 
.tab .content h1{
  font-size: 2.5rem;
  margin-top: 20px;
}
.tab .content p{
  font-size: .85rem;
  line-height: 1.6;
}
 
/设置为元素的宽高及字体为Genericons,不然图标无法显现,只会显示白色的空框框/
.social a:before,
.social a:after{
  position: absolute;
  width: 80px;
  height: 200px;
  display: block;
  text-indent: 0;
  padding-top: 90px;
  padding-left: 25px;
  font:normal 30px Genericons;
  color: #fff;
  transition: all .5s ease;
}
 
/*因为当我们hover上去的时候图标会更大,所以after伪类的字体及padding要重新设置,同时
要将margin-left设置为80px,这要默认情况下显示的就是before伪类的小图标*/
.social a:after{
  font-size: 48px;
  padding-top: 80px;
  padding-left: 20px;
  margin-left: 80px;
}
 
/*Add icons*/
.youtube a:before,
.youtube a:after{
  content: '\f213';
}
 
.youtube a:after{
  background-color: #fc0000;
}
 
.twitter a:before,
.twitter a:after{
  content: '\f202';
}
 
.twitter a:after{
  background-color: #6dc5dd;
}
 
.facebook a:before,
.facebook a:after{
  content: '\f204';
}
 
.facebook a:after{
  background-color: #3b5998;
}
 
.linkedin a:before,
.linkedin a:after{
  content: '\f208';
}
 
.linkedin a:after{
  background-color: #00a9cd;
}
 
.instagram a:before,
.instagram a:after{
  content: '\f215';
}
 
.instagram a:after{
  background-color: #6dc993;
}
 
.github a:before,
.github a:after{
  content: '\f200';
}
 
.github a:after{
  background-color: #6e5494;
}
 
/*当屏幕最大宽度为960px时*/
@media(max-width:960px){
  .container{
    width: 70%;
  }
    /*让高度为auto*/
  .accordion{
    min-width: 450px;
    height: auto;
  }
 
    /*让li显示为block,这样就会依次往下排*/
  .tab{
    width: 100%;
    display: block;
    border-bottom: 1px solid #333;
  }
    /*这个一定要设置,因为原本的.tab:hover时宽度为450px,假如.tab的宽度有600px,在hover时就回剩余150px的空白,不是我们想要的效果*/
  .tab:hover{
    width: 100%;
  }
  .tab .content{
    width: 85%;
  }
    /*设置对应伪类的padding值,使其大概显示在中间*/
  .social a:before{
    padding-top: 60px;
    padding-left: 25px;
  }
  .social a:after{
    padding-top: 50px;
    padding-left: 20px;
  }
}

到此这篇关于详解CSS3实现响应式手风琴效果的文章就介绍到这了。

turned_in
菜单