大数跨境

为 WordPress 和 Blogger 定制博客主题

为 WordPress 和 Blogger 定制博客主题 电商实践
2011-02-25
0
导读:打造让人愿意反复回看的精彩内容,只是成功博客的一半;另一半则在于呈现方式与风格。为了拥有独特的设计,应避免使用博客平台的预设主题,转而定制专属主题。目前有许多工具可……

构思能吸引读者反复阅读的精彩内容只是打造优秀博客的一半,另一半则在于呈现方式和风格。为了拥有独特的设计,请避免使用博客平台的预设主题,转而自定义专属主题。

有一些工具可以帮助生成自定义主题,且对 HTML、JavaScript、PHP 和 CSS 的理解要求极低。即使是毫无经验的商家也能使用它们。

请考虑以下工具,帮助您为两大顶级博客平台 WordPress 和 Blogger 生成自定义博客主题。

WordPress 主题生成器

网络上为WordPress提供了数千种预设主题。有些在WordPress Themes等网站免费提供,而有些则在如iThemes之类的网站上收取一次性费用。这两种都是有效的选择。

CSSEZ.com 生成器

但一个定制主题能为你的博客增添额外亮点,而在WordPress中生成它只需借助CSSEZ即可轻松完成。以下是该流程的概述。

  1. 首先访问CSSEZ website并注册一个免费账户。你需要此账户来保存和下载你创建的主题。
  2. 点击页面中部的“立即创建”按钮或页面顶部的“创建”选项卡;两者均可进入主题创建流程。
  3. 您将被引导至一个模板框架,其中包含用于博客各个侧边栏、正文、按钮和选项卡的占位文本。
  4. 要更改布局,请将鼠标光标移至蓝色的“CSSEZ!”图标上,将出现一个编辑菜单覆盖层。
  5. 通过 CSSEZ 编辑子菜单,您可以调整布局、列宽以及整体外观、颜色、样式、字体、文本大小等。所有设置都非常可定制。

    CSSEZ 主页。

要开始使用实际的自定义主题,请按照以下步骤操作。

  1. Layout Tab。从布局开始。在单列到四列之间进行选择,并决定这些列在你页面上的外观。然后调整顶部菜单标签和底部页脚设置;如果不需要其中任何一项,只需点击“Hide”。
  2. Detail Tab。接下来,你可以从这里更改每列、标签、侧边栏、页眉和页脚的内容。调整字体、颜色、文本大小和其他呈现设置。
  3. 保存并下载。完成后,点击“保存并下载”。CSSEZ WordPress 将自动生成一个 .zip 文件。点击“下载主题 ZIP 文件”按钮并下载您的文件。在计算机上解压文件,并将文件夹命名为易于记忆的名称。在本例中,我们将其命名为“CSSEZ Theme 1”。然后在网站后台,使用 FTP 客户端访问博客的 Web 服务器。找到由 WordPress 创建的名为“wp-content/themes”的目录文件夹,并将文件文件夹上传至该处。上传完成后,要安装您的主题:(a) 请前往您的 WordPress 管理面板,(b) 点击“Presentation”选项卡,(c) 选择“CSS Theme 1”。

WordPress Theme Generator

如果 CSSEZ.com 的细节过于繁琐,而您希望采用极简方法,请尝试 WordPress 主题生成器。它支持 WordPress 2.1 至 3.1 版本的主题,并与所有主流浏览器兼容。它可以帮助您在几分钟内制作一个简单的 WordPress 主题。

WordPress 主题生成器主页。

  1. 前往 WordPress Theme Generator。
  2. Site Name。这里有几个简单的下拉菜单,每个选项有限,先从顶部的站点名称开始,输入希望在博客上显示的网站名称。在此示例中,我选择了“Test Blog”。
  3. Text Color for Title。然后从下拉菜单中选择希望文本显示的颜色。选择完颜色后点击“Save”。或者,通过输入图像的URL地址,选择用图像而非文本来展示你的博客标题。
  4. Text Body Size。接下来,从一组文本大小预设中选择,或输入自定义大小。
  5. Sidebar Left and Third Column。如果你希望在主体文本的左右两侧都设有侧边栏,请在此处以像素为单位选择列的大小。如果不想有左侧边栏,请选择“No Sidebar”;如果根本不想有右侧列,请选择“No Extra Column”。
  6. Menu Layout。如果你有左侧边栏,你可以自定义类别和标签在屏幕上的显示方式,并在页面顶部添加标签。
  7. Scheme Overall。在这里,你可以选择背景图像、每篇文章正文的背景、边框大小和颜色。你可以通过输入存储图像的自定义URL地址来选择自定义图像。在此示例中,我使用了一张皱纹纸的库存图片并将其设置为“Background”。
  8. 文本方案。通过十多个下拉菜单,您可以自定义字体颜色、字体样式以及页面在鼠标悬停时的行为等更多设置。
  9. 标签云、归档、搜索与分发。如果您仍在使用 WP 2.3,可以添加一个标签云,或者将其设置为“无标签”。设置搜索参数以控制以前发布的文章在搜索结果中的显示方式,然后设置版权声明。
  10. 设置好主题后,您可以点击页面底部的“预览”按钮进行预览。对主题满意后,点击“保存”。
  11. WordPress Theme Generator will automatically generate a .zip file. Then click the “Download theme ZIP file” button and download your file. Extract the files on your computer and name the folder something you will remember. For this example, we’ll call it “Test Theme.” Then on the backend of your site, use an FTP client to access your host web server. Find the directory folder titled “wp-content/themes” — created by WordPress — and upload the file folder there. Once uploaded, go to your WordPress Admin, click the “Presentation” tab and select “Test Theme” to install your theme.

WordPress.org 首页。

Blogger 主题生成器

与 WordPress 主题类似,在 Blog Themes Plus 等商店里有成千上万款免费和付费的预制作 Blogger 模板可供选择,它们提供免费和一次性付费的主题;而 BloggerTemplatesFree 则专注于免费的 Blogger 模板。

但是,借助 doTemplate 这样的工具,您可以在无需任何代码、脚本或 CSS 知识的情况下,免费创建一个相对个性化的博客外观。以下是具体步骤。

DoTemplate 首页。

  1. 访问 doTemplate。
  2. 浏览现成模板的选择,找到与您偏好的布局大致相符的模板。点击该模板的缩略图。您只能从这个工具自定义博客的最终细节。布局已确定,因此找到与您想象相对接近的模板非常重要。
  3. 接下来,点击较大模板截图顶部的“Customize and download”按钮。
  4. 您将进入自定义页面,只需点击红色高亮区域并修改其中的元素即可。自定义器允许更改背景、横幅、页眉、页脚、标签页、按钮、文本内容、字体样式、颜色等。
  5. 横幅。点击页眉区域,您可以比页面其他子部分更灵活地自定义该区域,包括上传自定义图形、更改不透明度以及在页眉中调整淡入效果和文本位置。
  6. 导航。点击顶部菜单栏,并根据您想要的效果更改颜色、大小和文本。
  7. 容器与布局。点击“Container”可更改正文出现区域的中心列的整体宽度。然后点击“Layout”,自定义字体、文本颜色、链接和标题。
  8. 背景。点击中心正文列的一侧,更改背景颜色。
  9. 底部。点击模板底部,可更改背景颜色、大小、链接行为等更多内容。
  10. 下载。您会在屏幕最左侧看到一个绿色的下载按钮。准备好下载并保存新模板时,请点击此按钮。点击绿色按钮后,服务会询问您使用的格式——请选择“Blogger”。
  11. 模板准备就绪后,您将看到一个显示“Download your template”的新按钮。点击此按钮,下载将自动开始。DoTemplate 会创建一个 .zip 文件夹,其中包含存储在您模板 .zip 文件夹中的所有详细信息。
  12. 接下来,从 .zip 文件夹中提取文件并保存它们。

要在您的 Blogger 账户上安装新主题,请按照以下步骤操作。

Blogger 首页。

  1. 登录您的 Blogger 账户。
  2. 转到仪表板,点击“Layout”选项卡,然后点击“Edit HTML”按钮。
  3. 上传从解压缩过程中保存的已提取文件夹中的“blogger.xml”文件。
  4. 接下来,你需要将模板中的图片托管在其他地方,因为 doTemplate.com 只会短暂托管这些图片,随后便会将其删除。DoTemplate 建议使用 Picasa,因此我们将在下文对此进行说明。
  5. 登录 Picasa。
  6. 将你从解压过程中创建的文件夹中“css”文件夹内的所有图片上传到 Picasa。“css”文件夹位于主“images”文件夹内。
  7. 所有图片上传完成后,复制图片原始大小的 URL。要获取原始大小的 URL,请点击“放大视图”图标,右键点击图片,然后从中复制 URL。
  8. 现在返回 Blogger,在你之前所在的仪表板“编辑 HTML”页面中,找到每个图片的 URL,并将其替换为你新创建的 Picasa URL。HTML 代码会清楚地标明哪个 URL 对应博客的哪一部分,例如带有“background-image url”的行。将所有图片 URL 替换为你的 Picasa URL,即可完成操作。
【声明】内容源于网络
0
0
电商实践
电商实践
内容 8051
粉丝 0
电商实践 电商实践
总阅读15.4k
粉丝0
内容8.1k