# wp_vpn358 **Repository Path**: jianhui/wp_vpn358 ## Basic Information - **Project Name**: wp_vpn358 - **Description**: wordpress的主题，专门用于图书馆 - **Primary Language**: PHP - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 1 - **Created**: 2014-10-21 - **Last Updated**: 2022-04-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README #wp_vpn358 图书馆的Wordpress主题，采用[zui.sexy](http://zui.sexy)的css，基于https://github.com/320press/wordpress-bootstrap 开发 期望的功能有 + 适应手机端 + 自定义布局 + 新书推荐、文档列表、资源导航等功能 + 当前支持的shortcode使用[简介] (http://git.oschina.net/jianhui/wp_vpn358/issues/1) + 自定义专题设计可能会用到的[组件](http://git.oschina.net/jianhui/wp_vpn358/issues/2) ####项目宗旨、起因 各大高校、高职图书馆，每年要建好几个网站，图书馆的一些需求与普通网站并不相同， 如专家文库、机构库等功能，与普通cms相比，只是多了一些字段，但很多cms通常并不提供， 而这些专家文库、机构库等功能却花费不菲。 在图书馆工作这么多年，发现两点： 1. 图书馆的很多功能是重复的，因此希望做一个完善一些的网站， 能够满足图书馆绝大部分常规需求，并能提供足够强大的二次开发功能。 2. 图书馆的cms要提供一些专题设计功能，例如开了一次读书节，开展了一次真人图书馆活动， 希望做一个像网站首页一样的专题，有图片、有导读、有内容列表，而当前的cms往往缺少专题设计功能， 内页只能提供一些列表式的内容显示，比较遗憾。 解决方案： 针对以上两点，Wordpress对图书馆而言实在是非常比较理想的建站工具，海量的插件，完善的二次开发接口，功能非常强大。 唯一缺少的，就是一些图书馆的常用功能，因此，我希望把图书馆常用图书检索、opac登录、资源导航等功能做成通用组件， 免去大家二次开发的麻烦。 其次，根据图书馆的实际情况，把一些组件、常用功能作用shortcode，利用Wordpress的shortcode功能， 可以在page中二次设计一些专题。 ####当前状态 已经在南京工业职业技术学院图书馆[主页](http://lib.niit.edu.cn)等网站得到了应用， 1. 完全自适应手机，菜单也能自动收缩了 2. 支持flaxpaper，上传pdf自动阅读(注：这点无法在手机上阅读，不过这些pdf本身也不支持手机) 3. 提供了部分shortcode短代码，包括检索框、好书推荐。好书推荐当前是用的一个组件，电脑上看是tab样式，手机上看是手风琴样式 4. 其他的短代码包括首篇简介+标题列表、纯文章标题列表、多图片+文章标题列表、图片+首篇简介+文章标题列表、大幻灯片+内容切换 ####建设过程 Wordpress的开放性，可以坐很多工作，下次专门写一篇Wordpress建设图书馆门户的建设过程。 ####开发计划 1. 增加更多的短代码，包括 多个图片列表、多个（图片+简介）列表 2. 增加大小幻灯片切换 3. 分类页显示一篇篇文章，当前只有左侧小图片+标题+内容简介这一种形式，后面准备增加纯标题、标题+简介等形式 4. 后台管理页面设置，当前自定义首页，需要修改config_index.php文件，希望将来增加后台配置页，方便使用。 #### 开发历程 最初的版本基于320press开发，320press采用bootstrap3，自适应布局，兼容手机端，但上线后立刻发现不兼容ie8，用ie8浏览报错，而图书馆有很多浏览器是ie8及以下，不得不放弃 后面第一个版本转而基于customizr开发，customizr基于bootstrap2，对浏览器的兼容性比bootstrap3好很多，ie8不再出错了。采用子主题的方式。由于customizr是个收费主题，免费版有很多限制，二次开发并不方便，因此很快就放弃了。 当前是第二版，320press+zui开发，zui是兼容bootstrap3的ui库，由青岛蝉知[]开发，320press仅仅把bootstap3替换成zui，立刻对浏览器兼容性好了起来。 由此基础上，针对图书馆的需求，开发了一些功能： #####在线阅读、专家文库 + 仿百度文库的在线阅读功能，可以用于图书馆专家文库建设。 上传一篇pdf文档，自动转换格式，可以像百度文库一样供访问者阅读，采用flexreader组件 百度文库限制已经采用bdjson了，但手机布局完美兼容，我们还是没办法，只能采用flexreader。 #####功能组件短代码 短代码是Wordpress提供的特色功能，不了解的同学请百度之。 ###为何需要短代码？ 图书馆每年有很多的专题建设功能，例如读书节、名家专题、阅读专题等，这类页面布局比较类似，上面是一张图片，可以是读者、图书或者专家，旁边是简介，下面是一个个块，可以是文章、列表、图片+列表等，相当于一个特殊的主页。 根据短代码，可以组装成人和我们需要的样式，完成各类专题建设任务。 #####需要的功能组件有 1. 好书推荐，一个响应式布局的tab，手机端浏览是转换为，tab栏在右侧，左侧显示图书封面，中间显示图书简介【已经完成】 2. 图书检索，包括opac检索、读秀检索、e读检索，管理员可以需要在配置文件中显示需要的，并可以iframe方式显示图书馆自己的检索【已经完成】 #####图文列表，包括 1. 纯文章标题列表 2. 多图片+文章标题列表 3. 图片+首篇简介+文章标题列表 4. 多个图片列表 5. 多个（图片+简介）列表 6. tab页新闻和通知 列表用于列出文章。 1. 分类列表，包括多种样式，标题纯列表式，分类图片左侧+标题列表，分类图片左侧+分类简介+标题列表，分类图片顶部+标题列表；分类图片来源于分类简介或者config文件的默认图片 2. 分类列表的图片显示，多种样式，grid显示分类每一篇文章的第一张图片，li显示图片+标题，li显示图片+标题+内容简介 3. 引用优酷等视频内容，根据读者浏览器，例如用手机浏览时，自动切换到相应视频的mp4 4. 图片+标题的slider #####sidebar需要的组件 1. 时间轴的生平简介，用于介绍科学家等 2. 分类新闻，可以选择条数、类别 3. 带tab的新闻栏，可以显示多个分类的新闻栏 4. 读者opac系统登录 #####Wordpress分类页的显示样式 1. 默认的li标题列表，此不用开发 2. 标题+内容简介列表 3. 左侧图片+标题+内容简介 4. 视频缩略图+标题，grid样式 ###使用方法 在wp-content/themes目录下运行命令 ``` git clone https://git.oschina.net/jianhui/wp_vpn358.git ``` 然后启用主题即可 ####参与开发的要求 欢迎图书馆人员贡献代码，请在http://git.oschina.net 上注册账号，我把大家加入到项目中 + 参与项目最好理解git的使用 git的使用：http://git.oschina.net/progit/ + 每个人开发，请新建一个branch ####前期主要以功能开发为主，网页设计采用bootstrap3 + 要求熟悉html+css网页设计. html教程：http://www.w3cschool.cn/index-5.html css教程：http://www.w3cschool.cn/index-7.html + 在前面的基础上，要求理解bootstrap3网页设计css框架，尤其是页面自定义布局这部分 bootstrap介绍和使用：http://v3.bootcss.com/getting-started/ + 懂php代码的开发，要求不高，只要能看懂基本的代码即可 php教程：http://www.w3cschool.cn/index-36.html + 理解Wordpress的二次开发，要求懂得Wordpress的内置函数、挂钩（hook））、action的使用 Wordpress二次开发：http://blog.wpjam.com/article/wp-theme-lessons/ ##测试环境搭建 + 到 https://bitnami.com/stack/xampp#wordpress 下载windows下的Wordpress运行环境 + 从http://git.oschina.net/jianhui/wp_vpn358 下载代码到本地，进行测试。Wordpress的使用请Google。 + 编辑config_index.php文件，设置首页显示的分类 ======= ##当前提供的短代码用法简单示例 * 将图书馆常用的功能封装成组件，并以shortcode的方式，方便管理员Wordpress二次设计一些页面，当前支持的shortcode有 [book_tab2acc cat_id=13 id=sample_id]，用于展示图书，电脑上浏览是tab方式的，手机浏览是手风琴方式的 * [vpn358_search_box opac=opac.niit.edu.cn duxiu=www.duxiu.com yidu=lib.niit.edu.cn/xd/Public/yidu_edu.html] 这个是检索框，opac、duxiu、yidu都知道的，opac和读秀是网址，duxiu可以为www.duxiu.com.test.vpn358.com，可以校内统计；yidu是calis的yidu整合文件，以iframe方式集成 * [simple_list_cats cats_id=30,13 span="col-xs-12 col-md-6" len_content=100 img_width=64px img_height=64px] span="col-xs-12 col-md-6"是bootstrap3的布局，col-xs-12指在小屏幕（<768px）的设备上独占一行，col-md-6在较大屏幕上占据半行的位置，具体可以见bootstrap3的栅格系统(http://v3.bootcss.com/css/#grid) 注意，只有len_content大于0的时候，img_width、img_height才有效，因为这时候才会显示图片。 len_content=0时，只显示标题，没有图片和内容简介。 1. [book_tab2acc cat_id=13 id=zhang] 这个是新书推荐 ![undefined](http://git.oschina.net/uploads/images/2014/0926/220457_be0df3f0_9112.png) 2. [cat_img2_list cats_id=30,13 span="col-xs-12 col-md-12" len_content=50 title_count=3] 这个是2张图片的好书推荐 ![undefined](http://git.oschina.net/uploads/images/2014/0926/220527_1ca921cb_9112.png) 3. [cat_img_list cats_id=30,13 span="col-xs-12 col-md-12" len_content=50 title_count=3] 图片+简介的分类列表 ![undefined](http://git.oschina.net/uploads/images/2014/0926/220539_633f6a12_9112.png) 4. [vpn358_search_box opac=opac.niit.edu.cn duxiu=www.duxiu.com yidu=lib.niit.edu.cn/xd/Public/yidu_edu.html] 检索 ![undefined](http://git.oschina.net/uploads/images/2014/0926/220551_f3f5ce14_9112.png) 5. [cat_list_top cats_id=30,13 span="col-xs-12 col-md-12" len_content=150 count=800] 标题+简介+分类列表 ![undefined](http://git.oschina.net/uploads/images/2014/0926/220925_130976a2_9112.png)