跳到主要内容

WordPress网站:14个很棒的例子

+$These amazing WordPress websites showcase the best of this popular CMS. When it first launched in 2003, WordPress was regarded as a basic blogging tool for amateurs. Very quickly it took off, becoming a fully fledged CMS that now powers millions of sites across the world. And creative professionals have been pushing the CMS' boundaries to create complex and beautiful WordPress websites ever since.

+$To show you exactly what this incredible CMS can do, we've picked some of the best WordPress websites around. If this article inspires you to build your own WordPress website, theseWordpress教程+$will help you get started, or if you want to build an awesome looking portfolio, check out our guide to the bestWordPress组合主题

+$01. Rafal Bojar

WordPress websites: Rafal Bojar

+$This photography portfolio uses WordPress alongside Vue.js+$(Image credit: Rafal Bojar)

设计师Zhenya Rynzhuk+$used WordPress as a semi-headless CMS, withVue.js+$for the front end, to create this engaging photography portfolio site for+$Rafal Bojar+$. It features a homepage that displays previews of selected stories, a slick grid to showcase all of Bojar's work, and an 'essence' page explaining the photographer's philosophy and approach.

+$"The goal was to provide visitors with the unique experience and showcase Rafal's amazing works," says Rynzhuk. The pair discussed a few different backend options, but decided on WordPress so that the site would be easy to manage and regularly update with new projects.

+$Alongside WordPress and Vue.js, the site uses an S3 bucket to store data, which is delivered through Cloudfront to ensure speedy loading times. Rynzhuk also made use of+$Bedrock+$and Hendrik-Jan de Harder's+$Vue Skeleton+$, as well as GSAP for the animations.

+$02. Adel Vakula

WordPress websites: Adel Vakula

+$This model's site is brimming with charming, campy humour+$(Image credit: Adel Vakula)

+$Adel Vakula is an internationally famous model from the Ukraine, and this promotional site for her arrives from fellow countrymen+$Yabloko Ideas Studio+$, who not only designed and coded it but created all the illustration work. The result is a gorgeously distinctive visual feast, spanning a number of painterly vignettes featuring our glamorous heroine.

+$From the opening cotton candy cloudscape that literally bubbles with subtle animations,+$Vakula+$stars in dreamy portraits designed to demonstrate a charismatic personality. She whimsically overlooks the Parisian night atop a gargoyle doubling as a YouTube play button, after catching a New York Subway train from a platform complete with busking cat. Visits to Venice and Ibiza provide equally eccentric backdrops to Instagram and email links, where even cocktail-sipping seals encourage a follow. It’s tongue in cheek stuff but done with such charm and technique that you can’t help but fall in love. Even the mouse pointer goes all heart shaped.

+$Built on WordPress CMS, a standout UI element is a fun section where you can drag and drop outfits onto a virtual Vakula to view real modelling snaps. As calling cards for possible castings go, this one strikes a more memorable pose than most.

作者:马克·比伦

+$03. Middle Child

WordPress websites: Middle Child sandwich shop

+$Middle Child is built on a completely bespoke WordPress theme – click the image to explore the site

+$Award-winning, Philadelphia-based sandwich shop+$Middle Child+$needed a website that matched its quirky, unpretentious vibe. Full-service design and technology studio自我意识+$rose to the challenge, creating a site based on a completely bespokeWordPress主题运用+$Timber+$ACF+$– a combination that studio partner Mike Wagz calls "a game-changer for serious WordPress theme developers".

+$Self Aware also made use of the latest web technologies in order to offer an optimal experience: the layout was created usingCSS网格,和服务人员+$caches static assets including CSS and JavaScript files in order to speed up initial load times.

+$"Middle Child oozes atmosphere from every nook and cranny," adds Wagz. "It warmly welcomes customers from all walks of life with just the right amount of fun, kitsch, and quirk. I think this design is successful because we were able to capture this spirit and translate it to the web."

+$04. Sea Harvest

WordPress websites: Sea Harvest website on iPad

ED在其基于WordPress的网站上使用报纸式布局进行Sea Harvest

+$When Canberra-based seafood market海洋收获+$needed a new brand identity and smart digital presence to match, it turned to Australian web and branding agencyED。 WordPress网站采用引人注目的报纸式布局,有很多奇特的探索方式。

+$"When we think about seafood, many of us are taken back to a memory of eating fish and chips by the beach with friends and family," says designer Cam Tidy. "Often these takeaway joints would wrap your food in newspaper, so it felt natural to explore that as a visual idea."

+$Replicating a static, print layout on the web wasn't without its challenges, though. The team used CSS Flexbox to reposition content whilst maintaining consistent spacing, regardless of screen size. Nearly every measurement is based on a responsive scale using REM units, making it easier to maintain control over type and image proportions as the browser scales.

+$Developer Bryn Shanahan's favourite feature is the fact that users can 'draw' on the site, including via an互动文字搜索+$. "We achieved this by covering the site with an HTML5 Canvas element, which was then used to draw the user's drawings onto," he explains.

ED使用WordPress进行很多网站项目,发现它对用户友好且直观。 “[WordPress]具有简单的后端开发,可以让更多的时间专注于前端,将设计变为现实,”开发人员Adam Forcucci补充道。 “的能力使用WP Rest API使其无头,允许我们使用React等框架,这将成为我们在平台上未来发展的核心。“

+$05. Maxim Shkret

WordPress websites: Maxim Shkret

+$'Melting Panda' can be spun left and right+$(Image credit: Maxim Shkret)

+$Based out of Saint Petersburg, Russia,Maxim Shkret+$is a freelance digital artist. His impressive WordPress website marries portfolio to ecommerce marketplace, launching a novel fundraising initiative.

+$The site opens on a series of four 3D models, or digital sculptures that can be dragged and rotated 360-degrees. Pig, Desert Fox, Double-natured Unicorn and Melting Panda can be spun left and right to achieve a favoured angle. By clicking the ‘Buy this shot’ button, visitors can purchase a digital image at various dimensions for various prices. The proceeds will be pooled back into transforming each digital model into real physical sculptures using a 3D printing five-axis CNC machining process. It’s a neat idea for inviting contributors and shows how a crowdfunding approach can be attached to a typically passive experience.

+$Site production credits include New York’s Sochnik Design Studio, but the slick UI efforts never overshadow Shkret’s talent. This includes a simple Gallery section of still sculpture shots that ripple and wave through a watery filter. It’s a subtle effect, but heightens the sense of texture Shkret intends to give each piece.

+$06. KOBU

WordPress websites: KOBU creative agency

+$The website for KOBU opens with an undulating lava lamp-style homepage

+$Portfolio sites, unsurprisingly, continue to provide some of the web’s most fertile ground for creative expression and inspiration. This online calling card for Portuguese agency+$KOBU+$follows that ethos with a tasteful, restrained WordPress website that still bubbles with character. Calling itself a 'brand laboratory' that is unafraid of experimentation, the technical work here demonstrates imagination over complexity.

+$Over a series of elements, we get a reminder of how CSS and SVG can be combined for maximum frontend character. Absolute positioning is used to overlay charming wireframe motifs, breaking up the lines between bold background colour blocks and linking sections together. A looped HTML5 video panel gets a unique wiggly edge using an SVG shape as a mask positioned above, before case study images have their border radius halved to go circular. The site makes neat use of the slick.js carousel library to ‘trot’ the KOBU team, with office horse, through the middle of the main page.

+$The zenith, though, is probably the bit we see first, opening on an undulating lava lamp-style header produced by manipulating SVG paths. Utilising the anime.js plugin, a polyvalent JavaScript animation engine, it’s an eye-catching trick for establishing colour palette, if nothing else.

作者:马克·比伦

+$07. Noformat

WordPress websites: noformat homepage

Noformat的主页有很多直接影响

+$noformat+$is a strategic design studio based in New York. The homepage features an animated eyeball design that follows the visitor's cursor around the screen, while overlaid text cycles through all the things noformat can create. To create the eyeball, the team first explored the design inAfter Effects CC在使用three.js构建交互式版本之前,noformat的创始人兼创意总监Ian Brewer解释道。

+$"We used vertex and fragment shaders to optimise for GPU rendering and made it pulsate and flash the noformat logo inside," continues Brewer. "We then applied post-processing effects to give it a more organic and less 3D look by blurring the edges and adding bloom to the highlights."

该网站的其余部分辜负了第一页的影响,光滑的滚动过渡和微妙的视差效果展示了技术技能,而不会影响可用性。

+$"We chose WordPress for our site for speed to launch, and flexibility," explains Brewer. "Over the years we have built our own libraries and module-based editing systems that allow us to create or edit a site faster than any other CMS solution."

+$08. Femme And Fierce

荷兰体验设计工作室仙境+$has delivered ecommerce with sass for女人和凶猛+$. The WordPress website's in-your-face, clash-tastic colour scheme delivers the online fashion retailer's brand message from the off. Animated 'stickers' – twirling lollipops, jabbing arrows, licking lips – create a cheeky feel and should resonate with the Snapchat/Instagram generation at which this range is aimed.

+$09. Puree Maison

Purée Maison WordPress website

动画涂鸦使这个WordPress网站栩栩如生

PuréeMaison+$is a creative and strategic studio based in Paris. Its WordPress website stands out mainly thanks to the sunny yellow animated scribbles that appear on hover, inject personality into boring brand statements and liven up transitions. They also help the visitor find their way around, and encourage them to explore and interact with the site.

+$10. We Virtually Are

WordPress websites: We Virtually Are's site

我们实际上是网站充分利用360度视频来销售其服务

+$When your business is all about enthralling people using virtual reality to tell emotive stories, you need a site that draws people into your work. And boutique VR studio我们实际上是+$has managed that and then some. Its site, built byHerdl在WordPress上,使用大量尖端技术,包括WebGL和360度视频,为您提供不可抗拒的沉浸式服务。查看奥迪的VR测试驱动器,以及意外的名人客人。

+$11. Asaro

WordPress websites: Asaro

+$Asaro's site is responsive enough to look beautiful on all screen sizes

+$Asaro is a provider of unique adventure experiences and entertaining journeys for superyacht guests around the world. As part of a broader corporate rebrand, this slick website was designed and developed by Bristol-based agency绿色变色龙

+$Built on a custom WordPress framework to keep ongoing content editing easy for the client, visitors are taken on a voyage of discovery packed with charm. Subtle scroll effects are linked neatly to an interactive dotted line, plotting navigational progress in the way a yacht captain might mark charts. Custom CGI renders have been utilised as a graphical device for representing+$Asaro+$’s exclusive service offerings, in light of a scarcity of photographic assets due to the private nature of the events.

+$“The art direction was inspired by a mixture of water drop photography and theatrical poster design,” explains creative director Tom Anderson. “We loved the aesthetic of the photography style and felt that it tied in nicely with the underlying nautical theme of the project.”

+$Responsive enough to not only look beautifully consistent on smaller screens, access speed was also a motivation for streamlining performance. With boat dwellers at the mercy of marine web connectivity, load times are more chipper than choppy across desktop, tablet and mobile.

作者:马克·比伦

+$12. Design Museum Denmark

WordPress websites: Danish Design Museum

智能使用视差滚动和响应式图像使丹麦设计博物馆的网站成为必看之处

由哥本哈根设计和品牌推广机构建造愚蠢的工作室+$, the site for Denmark's设计博物馆+$not only showcases the museum's archives, collections and research, but also presents it in a bang up-to-date style. From its opening SVG animation of the museum's logo, through to eye-catching视差滚动当您滚动浏览内容时,它可以提升心情,增强情绪,是完美的在线体验。

+$13. Katy Perry

WordPress websites: Katy Perry

甚至主要名人也在使用Wordpress提供的工具

流行公主Katy Perry使用WordPress来主持她的官方网站。聚焦 - 可以理解 - 在视觉和社交媒体线索上,该网站利用艺术家的高规格投资组合作出大胆的陈述。向下滚动以查看旅行日期,商品等,或使用图标查看更多信息。

+$It's a clean cut yet edgy site that manages to blend the artist's distinctive bubblegum pop personal image with a user-friendly, glossy mag style functionality. Gone are the days of busy band sites packed with too much animation and music you can't stop.+$Perry's Website+$proves you can pack in plenty of personality using just a simple white background and easily navigable links, giving fans the option to listen, watch and learn easily and at their convenience.

+$14. The Ink Tank

WordPress websites: Ink Tank

Kao Collins的网站旨在让您考虑墨水

+$Starting out in 1989 as Collins Inkjet, a one-man operation supplying ink for Kodak's continuous inkjet printer, today Kao Collins is one of the world's leading suppliers. And if you've never really thought about ink (beyond cursing when your printer runs out), Kao Collins' site, The Ink Tank, is about to change that.

由__建造DBS Interactive墨水盒+$is an eye-catching WordPress site that pulls out all the stops to bring you cutting-edge news from the ink industry and showcase some of the creative ways businesses and artists are currently using ink. The highlight, as far as we're concerned, is its History of Printing section: a gorgeous parallax single-pager packed with animation and effects, taking you all the way from clay tablets to today's high-speed single pass printing, and looking ahead at some of the future possibilities of printing.

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London

(形象信用:未来)

阅读更多:



翻译字数超限