CSS is broken after changing “site url” to blog domain instead of local IP

bobbel
(@bobbel)

9 years, 4 months ago

Hello,

I’m using wordpress 4.7.1 on raspberry pi 3 with nginx webserver and mysql db. It seems to use the theme twentyseventeen by default.

After installing wordpress the site url and home were (automatically) set to the internal ip of the server 192.168.xxx.yyy and the home page loaded fine, also when called by http://my.site.com from external. (I believe I did all the necessary nginx settings correctly.) After changing the wp option “site url” in wp db to http://my.site.com the home page loads with broken css.

First it shows an empty page containing only a Hyperlink “Skip to content” and a placeholder for the background image. When clicking on it it loads the start page html without css.

Does anyone have a clue what the problem could be?
Thanks

Viewing 12 replies - 1 through 12 (of 12 total)

Moderator t-p
(@t-p)

9 years, 4 months ago

– Access phpMyAdmin on your host, then check the wp_options Table (Note: The table prefix of wp_ may be different if you changed it when installing), and make sure siteurl field and home field are correct. See https://codex.wordpress.org/Changing_The_Site_URL#Changing_the_URL_directly_in_the_database
– If you haven’t already done, always backup your database before doing any actions, just in case something really goes wrong. You can never have enough backups!

Thread Starter bobbel
(@bobbel)

9 years, 4 months ago

That’s exactly what I did. I changed the site url and home to my.site.com through phpmyadmin in the db . And then the page loads with broken css.

Thread Starter bobbel
(@bobbel)

9 years, 4 months ago

Correction: I changed it to http://my.site.com

Moderator t-p
(@t-p)

9 years, 4 months ago

Site URL?

Also point to the problem area.

Thread Starter bobbel
(@bobbel)

9 years, 4 months ago

Yes,

siteurl: http://my.site.com
home: http://my.site.com
==> Home page loads without css, as described in the beginning

if I switch it back to

siteurl: 192.168.xxx.yyy
home: 192.168.xxx.yyy
==> Page loads with css

I want to set the siteurl and home to http://my.site.com (because i suppose this is how it should be). How can I make it load the css correctly?

Is it maybe related to webserver (nginx) settings?

Here is the content of the etc\nginx\sites-available\default – in case the issue might be here

server {
listen 80 default_server;
listen [::]:80 default_server;

root /var/www/html;

# Add index.php to the list if you are using PHP
index index.php index.html index.htm index.nginx-debian.html;

server_name my.site.com http://www.my.site.com;

location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
location / {
# try_files $uri $uri/ =404;
try_files $uri $uri/ /index.php?q=$uri&$args;
}
}

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
location ~ \.php$ {
include snippets/fastcgi-php.conf;
# With php5-fpm:
fastcgi_pass unix:/var/run/php5-fpm.sock;
}

}

# deny access to .htaccess files, if Apache’s document root
# concurs with nginx’s one
location ~ /\.ht {
deny all;
}
}
Pothi Kalimuthu
(@pothi)

9 years, 4 months ago
The moderator asked about your actually site URL that anyone in the internet can see. That said, your Nginx configuration looks okay to me.
- This reply was modified 9 years, 4 months ago by Pothi Kalimuthu. Reason: typo!
Thread Starter bobbel
(@bobbel)

9 years, 4 months ago

Sorry, I didn’t understand. The actual URL is http://ynbx.dyndnss.net

Moderator t-p
(@t-p)

9 years, 4 months ago

To rule out any theme specific issue, try switching to the unedited default Theme (Twenty Sixteen.) for a moment using the WP dashboard.

Dion
(@diondesigns)

9 years, 4 months ago

That URL points to some HTML which loads your WordPress site in a frame. That’s your problem, and you have two choices to solve the problem:

1) Change your DNS A record to have your domain name point to your IP address.

2) Change your WordPress “home” and “siteurl” options back to your IP address.

Due to how WordPress hardcodes those two options into generated URLs, you cannot obfuscate your IP address using frames.

I’ll also add that search engines are going to kill your site’s page rankings if you insist on playing the frames game, so option (1) is really your only option. If you want to obfuscate your IP address, consider using something like CloudFlare.

Thread Starter bobbel
(@bobbel)

9 years, 4 months ago

All, thanks for taking the time to look into this and reply.

@diondesigns: it sounds very plausible. However, I have a really basic question: How/where do I change the DNS A record? Is it something I can set on the server / router? Or is it managed by the domain provider?

I’ve set my router to always provide the same ip address for the wp server and mapped it to the domain, and set the necessary port routing for :80. Which seems to work, as the site can be accessed.

What am I missing?

Dion
(@diondesigns)

9 years, 4 months ago

A quick search on your domain name tells me that you would need to change your A record at nsentry.de, since that is the location of your domain’s nameservers.

Please be aware that it is very dangerous to run a website on your home system. Desktop systems are not hardened against attacks like servers are. And unless your ISP provided a static/dedicated IP address (which is rare), you will have problems if/when your ISP’s DHCP server assigns you a new IP address. And finally, running a website on a residential internet account is against the terms of service for all ISPs in the United States — you must have a business account to do so. If this is also true in Germany, then you risk having your internet service terminated.

Thread Starter bobbel
(@bobbel)

9 years, 4 months ago

DionDesigns, thank you very much for your explanations and advice.
The WP Site that I’m trying to set up will not be public, it’s just a private project to get some hands-on experience. So search engines and their page rankings are out of scope.

The html containing the frames is just coming from the out of the box theme twentyseventeen. So it’s not really the users’s choice when doing a fresh installation of WordPress as this is the default theme.

Anyway, I managed to solve the issue. I did some more research and found out that my router has some hidden settings (not accessible in the router management UI).

Here are the details in case someone has the same issue with same kind of router:

Router: Fritz!Box 7270

The domain used was provided by dyndnss.net, which dynamically assignes the changing IP provided by the ISP to your dyndnss domain (mysite.dyndnss.net).

For this to work correctly there are some changes necessary in the Fritz!Box configuration:

Port forwarding for http requests:
Go to Fritzbox admin page > Shares > Port Forwarding

Port 80
Internal IP-Adresse of the server: 192.168.xxx.yyy
Computer: host name of the server
Protocol:TCP

On the WP Server I set up nginx as described in a previous post.

Now the missing part was a hidden setting by which the internet domain
is mapped to the static internal IP of the server. Here’s the link to the original site where I found the solution:

https://adrian-jagusch.de/2015/03/domains-abfangen-mit-der-fritzbox-als-dns-server/

As it is in german, here’s the translation:

Step 1
Go to the Fritz!Box admin page (192.168.178.1) > Home Network > Network
Click to edit the properties of your server (should be in the list)
Enable the checkbox “Always assign the same IP Address to this device”
Write down the IP-Address

Step 2
Go to System > Settings Back-up
Enter password and save the settings file to disk
Edit the file with a text editor and update following block with your domain information and the IP from step 1

landevices {
landevices {
ip = 192.168.xxx.yyy;
name = “mysite.dyndns.net”;
mac = 00:00:00:00:00:00;
medium = medium_unknown;
}
}

Add NoChecks=yes, in order to tell the admin utility to not check for changes when uploading the settings file back to the fritzbox

Language=de
NoChecks=yes
**** CFGFILE:ar7.cfg

Save changes and go to Back-up Settings > Restore Settings to upload the changed settings file. After successful upload, the Fritz!Box will restart.

Then it worked fine. So in my case it was a missing configuration step on the router. Strangely enough this isn’t mentioned in a lot of “recipes” for settings up the fritzbox for port forwarding with dynmic dns.

Thanks again to all who took the time to reply.